【GOOGLE登入】PhoneGap (Cordova) GOOGLE 登入教學

admin

第一步：先新增一個 Google API 的 Project 並開通 Google+ API

連結：https://console.developers.google.com/?hl=zh-tw

第二步：新增一個專案的 OAuth 憑證

第二步之一：填寫OAuth同意畫面

第二步之二：新增 OAuth憑證選擇 Android並填上套件名稱

　打開 cmd 輸入

keytool –exportcert –keystore C://Users/你的使用者名稱/.android/debug.keystore –list–v

(密碼預設為 android )

第二步之三：取得SHA1 的金鑰並輸入至OAuth憑證中並建立憑證

第三步：打開 Android SDK Manager 安裝 Google Play Service 元件

第四步：回到 phoneGap 專案安裝 googleplus 元件

cordova plugin add cordova-plugin-googleplus--variable REVERSED_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXX( REVERSED_CLIENT_ID 就是你剛剛得到的 API key )

第五步：使用方式

初始化 (載入時必須執行)

1. app.initialize();

複製代碼

元件是否正常運作

1. function isAvailable() {window.plugins.googleplus.isAvailable(function(avail) {alert(avail)});}

複製代碼

登入

1. function login() {
   
2. 　　window.plugins.googleplus.login(
   
3. 　　　　{},
   
4. 　　　　function (obj) {
   
5. 　　　　　　document.querySelector("#image").src = obj.imageUrl;
   
6. 　　　　　　document.querySelector("#image").style.visibility = 'visible';
   
7. 　　　　　　document.querySelector("#feedback").innerHTML = "Hi, " + obj.displayName + ", " + obj.email;
   
8. 　　　　},
   
9. 　　　　function (msg) {
   
10. 　　　　　　document.querySelector("#feedback").innerHTML = "error: " + msg;
    
11. 　　　　}
    
12. 　　);
    
13. }

複製代碼

登出

1.   function logout() {
   
2. 　window.plugins.googleplus.logout(
   
3. 　　function (msg) {
   
4. 　　　　document.querySelector("#image").style.visibility = 'hidden';
   
5. 　　　　document.querySelector("#feedback").innerHTML = msg;
   
6. 　　},
   
7. 　　function (msg) {
   
8. 　　　　document.querySelector("#feedback").innerHTML = msg;
   
9. 　　}
   
10. 　);
    
11. 　}

複製代碼

注意:如果登入出現錯誤請輸入這段到您的app中並取得SHA1指紋放到 GOOGLE API 的 OAuth 憑證中即可

1. <button onclick="window.plugins.googleplus.getSigningCertificateFingerprint(function(res){alert(res)},
   
2. function(res){alert(res)})">get cert fingerprint
   
3. (Android)</button>

複製代碼