第三方登录遇到的坑和注意事项 --- Google, Facebook

注: 目前 Google, Facebook 出于安全原因, 不支持在嵌入式浏览器(webview)中进行登录.

一. Google 登录

　　1. 注册 Goolge 开发者账号

　　网址: https://console.developers.google.com/apis/credentials

　　2. 在控制面板中获取凭据(Credentials)并新建一个项目

　　凭据生成时, 需要设置名称 / 验证Javascript脚本来源的域名 / 验证后生定向的路径.

　　还会自动生成: ClientID, Client secret, Creation date

　　注: 如果处在开发阶段, 虽然可以在验证来源的域名中加入 http://localhost:8080 , 但开发时会感觉很不方便. 因为现在后台服务基本都是https的. 不能交互, 我知道2种解决办法

　　a. 为本地机配置 https 证书.

　　可参考: https://juejin.cn/post/6844903863137337357

　　b. 下载并安装 ngrok, 然后注册账号, 并根据 token 启动 ngrok 服务, 使公网可以直接访问 localhost 服务.

　　网址: dashboard.ngrok.com

　　文档: http://ngrok.cn/docs.html

　　启动: #ngrok authtoken 授权码

　　　　 #/Applications/ngrok http 8080

　　启动后就可以将分配到的域名配置到 Google 凭据的设置中.

　　3. OAuth 同意屏幕(consent screen): 可以在这里设置测试用户等

　　4. 域名验证(Domain verification) : 在后台服务器上进行验证, 验证域名拥有者

　　5. 在 Library 中添加需要的服务, 如果没在首页中看到需要服务, 可以使用搜索进行查找.

这里我们只需要查看用户的基本信息, 因此只需要 Google.People.API 这个服务. 把这个服务设置为 Enabled

　　到此, 在 Google 开发者账号中设置基本完成.

　　6. 在页面中嵌入 HTML 和 Javascript

　　文档: https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out

<div id="g_id_onload"
                    data-client_id="CLIENT-ID"
                    data-context="signin"
                    data-ux_mode="popup"
                    data-callback="aaa"
                    data-auto_select="false">
                </div>

                <div id="g_id_signin" class="g_id_signin"
                    data-type="standard"
                    data-shape="rectangular"
                    data-theme="outline"
                    data-text="signin_with"
                    data-size="large"
                    data-logo_alignment="left"
                    data-width="280"
                >
                </div>

　　注: data-auto_select="true", 开启自动登录

var apiUrl = \'https://accounts.google.com/gsi/client?onload=init\'
            var script = null
            var el = document.getElementById(\'gl_btn\')
            var btnContainer = document.querySelector(\'#g_id_signin\')

            if(el){
                try {
                    console.log(\'gl removed\', google)
                    console.log(\'create google login button\')
                    google.accounts.id.initialize({
                        client_id: \'1049348858791-omlrdpcrm5rtneqm1nrp8c9eviu9gl7o.apps.googleusercontent.com\',
                        callback: aaa,
                    });
                    google.accounts.id.prompt((notification) => {
                        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
                            console.log(\'continue with another identity provider.\')
                        }
                    });
                    google.accounts.id.renderButton(
                        btnContainer,
                        {
                            icon: \'standard\',
                            size: \'large\',
                            shape: \'rectangular\',
                            theme: \'outline\',
                            text: \'signin_with\',
                            width: \'280\',
                        }
                    )

                    return
                }catch(e) {
                    console.log(\'没有 google 对象\')
                }
            }
            script = document.createElement(\'script\')
            script.src = apiUrl
            script.id = \'gl_btn\'
            script.setAttribute(\'async\', true)
            script.setAttribute(\'defer\', true)
            script.onreadystatechange = script.onload = function () {
                if (!script.readyState || /loaded|complete/.test(script.readyState)) {
                    setTimeout(function () {
                        console.log(\'google 脚本加载完成\')
                    }, 500)
                }
            }
            document.getElementsByTagName(\'head\')[0].appendChild(script)

二. Facebook 登录

　　1. 注册 Facebook 开发者账号

　　网址: https://developers.facebook.com/, 点击 "登录", 并注册登录

　　2. 登录 Facebook 开发者账号, 点击 "我的应用(My App)"

　　3. 创建应用

　　4. 添加商品, 需要用到的 Facebook 服务, 这里我添加了"Facebook登录", 在这里添加 Javascript来源域名和跳转地址

　　注: 这个商品不需要"验证" , 可直接授权

　　5. 在应用审核中申请权限和功能, 如: public_profile, email, 这些权限, 大部分需要验证和购买才能使用.

　　6. 设置 Facebook 登录: 设置网址, 生成代码等

　　7. 代码: 因为使用Facebook生成的按钮登录失败, 所以只好自写按钮, 再调用 FB 对象来进行登录了.

HTML

<div @click="fbLogin" class="button_green_big fb-btn">
                    <img :src="fbLogo" alt="" srcset="">
                    <span>Facebook Login</span>
                </div>

Javascript

var self = this
            var apiUrl = \'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v12.0&appId=\' + config.appIdGL + \'&autoLogAppEvents=1\'
            var script = null
            var el = document.getElementById(\'fb_btn\')

            if(el){
                try {
                    console.log(\'fb removed\', FB)
                    FB.init({
                        appId            : config.appIdGL,
                        autoLogAppEvents : true,
                        xfbml            : true,
                        version          : \'v12.0\'
                    });
                    return
                }catch(e) {
                    console.log(\'没有 FB 对象\')
                }
            }
            script = document.createElement(\'script\')
            script.src = apiUrl
            script.id = \'fb_btn\'
            script.setAttribute(\'async\', true)
            script.setAttribute(\'defer\', true)
            script.setAttribute("nonce", "6Jv8HtT6")
            script.setAttribute("crossorigin", "anonymous")
            script.onreadystatechange = script.onload = function () {
                if (!script.readyState || /loaded|complete/.test(script.readyState)) {
                    setTimeout(function () {
                        console.log(\'facebook 脚本加载完成\', FB)

                        FB.getLoginStatus(function(response) {
                            if (response.status === \'connected\') {
                                console.log(\'FB login accessToken:\', response)
                                self.sendFBToken(response.authResponse.accessToken)
                            }else{
                                console.log(\'FB login status: \', response)
                            }
                        });
                        
                    }, 500)
                }
            }
            document.getElementsByTagName(\'body\')[0].appendChild(script)

　　注: 在调用 FB.login() 方法时, 需要设置需要的权限 {scope: \'public_profile,email\'}

FB.getLoginStatus(function(response) {
                if (response.status === \'connected\') {
                    console.log(\'FB login accessToken:\', response);
                    self.sendFBToken(response.authResponse.accessToken)
                    self.getProfile()
                }else{
                    console.log(\'FB login status: \', response)
                    FB.login(function(response){
                        console.log(\'FB login response: \', response)
                        if (response.status === \'connected\') {
                            self.sendFBToken(response.authResponse.accessToken)
                            self.getProfile()
                        }else {
                            // user FB取消授權
                            console.log("Facebook帳號無法登入");
                        }
                    }, {scope: \'public_profile,email\'});
                }
            });

秒客网

第三方登录遇到的坑和注意事项 --- Google, Facebook

相关文章