第三方登錄遇到的坑和注意事項 --- 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'});
                }
            });