使用Google登录Javascript库强制用户批准提示

时间:2015-08-11 16:00:44

标签: javascript google-signin

我的应用程序遵循https://developers.google.com/identity/sign-in/web/server-side-flow所述的服务器端流程,它为客户端提供一次性代码,该代码被转发到服务器获取access_token和{的服务器{1}}。

在以前版本的Google Sign-In for Javascript库中,开发人员可以在设置库时传递属性refresh_token,以便在用户点击Google Sign时强制显示批准提示按钮。如果您需要再次获得'approval_prompt': 'force',这可能非常有价值,因为只有在向用户显示批准提示时,一次性代码才会授予refresh_token

以前在较旧的API中,我可以在调用refresh_token期间通过'approval_prompt': 'force'来强制提示。在较新版本的API中(使用gapi.signin.render()),它似乎不尊重gapi.auth2.init()。是否仍然可以使用Javascript库中较新的API来强制使用'approval_prompt': 'force'或某些类似机制的批准提示?

1 个答案:

答案 0 :(得分:2)

为了将'approval_prompt': 'force'与gapi一起使用,您可以使用grantOfflineAccess来考虑参数,而gapi.signin.render()则不会。

这是一个小型身份验证示例,用于获取具有指定范围的离线访问权限。使用'approval_prompt': 'force'始终请求权限(并且最终每次都获得新的刷新令牌):

<!-- The top of file index.html -->
<html itemscope itemtype="http://schema.org/Article">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="https://apis.google.com/js/platform.js?onload=start" parsetags="explicit" async defer></script>

        <title>Google authentication</title>

        <style type="text/css">
            #customBtn {
                display: inline-block;
                background: white;
                color: #444;
                width: 190px;
                border-radius: 5px;
                border: thin solid #888;
                box-shadow: 1px 1px 1px grey;
                white-space: nowrap;
            }
            #customBtn:hover {
                cursor: pointer;
            }
            span.label {
                font-family: serif;
                font-weight: normal;
            }
            span.icon {
                background: url('https://developers.google.com/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
                display: inline-block;
                vertical-align: middle;
                width: 42px;
                height: 42px;
            }
            span.buttonText {
                display: inline-block;
                vertical-align: middle;
                padding-left: 42px;
                padding-right: 42px;
                font-size: 14px;
                font-weight: bold;
                /* Use the Roboto font that is loaded in the <head> */
                font-family: 'Roboto', sans-serif;
            }
        </style>
    </head>

    <body>
        <h1>Google Authentication</h1>
        <hr>

        <div id="gSignInWrapper">
            <span class="label">Sign in with:</span>
            <div id="customBtn" class="customGPlusSignIn">
                <span class="icon"></span>
                <span class="buttonText">Google</span>
            </div>
        </div>

        <div id="log"></div>

        <script>

            var auth2;

            function start() {

                gapi.load('auth2', function () {
                    auth2 = gapi.auth2.init({
                        client_id: "YOUR_CLIENT_ID",
                        scope: 'profile'
                    });
                });
                $('#customBtn').click(function () {

                    auth2.grantOfflineAccess({'redirect_uri' : 'postmessage', 'approval_prompt' : 'force'}).then(signInCallback);

                });
            }

            function signInCallback(authResult) {

                console.log(authResult['code']);

            }

        </script>
    </body>
</html>