web网站接入谷歌登录-(更新-谷歌网页版登录新版)

html:(可以通过谷歌的代码生成工具生成:生成 HTML 代码  |  Authentication  |  Google Developers)

                    <div id="g_id_onload"
                        data-client_id="你的谷歌client_id"
                        data-context="signin"
                        data-ux_mode="popup"
                        data-callback="google_callback"
                        data-nonce=""
                        data-auto_prompt="false">
                    </div>

                    <div class="g_id_signin"
                        data-type="icon"
                        data-shape="circle"
                        data-theme="outline"
                        data-text="signin_with"
                        data-size="small">
                    </div>

 

js:

<script src="https://accounts.google.com/gsi/client" async defer></script>
<script type="text/javascript">
function google_callback(response){
    google.accounts.id.initialize({
        client_id: "你的谷歌client_id",
    });
    google.accounts.id.renderButton(
        document.getElementById("buttonDiv"),
        { theme: "outline", size: "large" }  
    );
    
    var tokens = response.credential.split(".");
    var payload = JSON.parse(atob(tokens[1]));
    var google_id = payload.sub;
    var params = 'google_id=' + google_id;
    var requestUrl = '<{$Think.const.SITE_URL}>user/ajax/action/ggregister?';

    $.getJSON(requestUrl + params + '&callback=?', function (data) {
        if (data.code != 1) {
            alert(data.msg);
        } else {
            window.location.href = '<{$Think.const.SITE_URL}>bxcq/server';
        }
    });
}
</script>

 附相关参考文档:

JavaScript新谷歌登录-获取用户数据:ID、个人资料图像和昵称 _大数据知识库 (saoniuhuo.com)

posted @ 2023-04-04 09:42  微笑范特西  阅读(789)  评论(0编辑  收藏  举报