使用 React Native 與 Amazon Cognito 實作 Google & Facebook 登入的功能

Standard

react-native-facebook-login

  1. 安裝 react-native-facebook-login
    yarn add react-native-facebook-login
    
  2. 打開套件目錄
    open node_modules/react-native-facebook-login
    

iOS

  1. 在 Xcode 中,把步驟 2 中的 RCTFBLogin.xcodeproj 檔案拖曳到專案中的 Libraries 目錄。2017-05-24 10 35 21
  2. 確定 Target 是專案本身、而非 react-native-facebook-login 套件,接著切換到 Build Phases 頁籤,展開 Link Binary With Libraries,點擊下方的 + 按鈕,鍵入 libRCTFBLogin.a 找到它,加入。

    2017-05-24 10 36 11

  3. 接下來要加入 Facebook SDK 到 Xcode 專案中。在專案目錄下透過 open node_modules/react-native-facebook-login/FacebookSDK 指令打開 FacebookSDK  資料夾。
  4. 確定在 Project Navigator 項目(如圖)中:

    2017-05-29 12 05 54

    然後在專案名稱上點右鍵,選擇 New Group,並輸入 Frameworks(若已經有此資料夾的話,此步驟可省略)。

  5. 在步驟 5 中打開的資料夾中,找到 FBSDKCoreKit.frameworkFBSDKLoginKit.frameworkFBSDKShareKit.framework 三個檔案,將他們拖曳到步驟 6 中建立的 Frameworks 目錄中。

    2017-05-23 9 10 39

  6. 切換到 Build Settings 頁籤,捲動尋找 Search Paths 中的 Framework Search Paths,加入 $(SRCROOT)/../node_modules/react-native-facebook-login/FacebookSDK

    2017-05-23 9 11 35

  7. 接著編輯 ios/專案名稱/AppDelegate.m,在 #import "AppDelegate.h" 之下,加入:
    #import <FBSDKCoreKit/FBSDKCoreKit.h>
    #import <FBSDKLoginKit/FBSDKLoginKit.h>
    
  8. 往下找到 didFinishLaunchingWithOptions 這個 function,將最後
    return YES;
    

    的部份改為

    return [[FBSDKApplicationDelegate sharedInstance] application:application
                                      didFinishLaunchingWithOptions:launchOptions];
    
  9. 然後在 didFinishLaunchingWithOptions 這個 function 結束後,加上:
    // Facebook SDK
    - (void)applicationDidBecomeActive:(UIApplication *)application {
        [FBSDKAppEvents activateApp];
    }
    
    - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:   (id)annotation {
        return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                              openURL:url
                                                    sourceApplication:sourceApplication
                                                           annotation:annotation];
    }
    
  10. 以上 FacebookSDK iOS 的安裝完畢,還剩一些設定 iOS 的部份就完成囉。接下來要進行 Facebook 應用程式相關的設定,先去 Facebook Apps – Quick Start for iOS,建立或是選擇既有的應用程式。在 Facebook 應用程式設定過程中,需要填入 bundle ID,可在 General 中找到:

    2017-05-23 9 45 03

  11. 接著以該應用程式的資訊,請編輯 ios/專案名稱/Info.plist,在第一層 <dict></dict> 之中,適當的區塊加上:
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>fb{your-app-id}</string>
        </array>
      </dict>
    </array>
    <key>FacebookAppID</key>
    <string>{your-app-id}</string>
    <key>FacebookDisplayName</key>
    <string>{your-app-name}</string>
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>fbapi</string>
      <string>fb-messenger-api</string>
      <string>fbauth2</string>
      <string>fbshareextension</string>
    </array>
    

    其中 {your-app-id} 是 Facebook 應用程式 ID、{your-app-name} 則是 Facebook 應用程式名稱。請依據實際情況填入。

好了,接下來是 Android 的部份。

Android

  1. 請至 Facebook Apps – Quickstart for Android 完成設定。過程中需填入 package name,可在 AndroidManifest.xml 中找到:

    image

    Key Hashes 則可透過步驟中的提示,使用 keytool 指令找到。

  2. 確定已經透過 yarnnpm 安裝了 react-native-facebook-login
  3. 編輯 android/settings.gradle,加入以下內容:
    include ':react-native-facebook-login'
    project(':react-native-facebook-login').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-facebook-login/android')
    
  4. 編輯 android/app/build.gradle,在 dependencies { } 區塊中加入以下內容:
    compile project(':react-native-facebook-login')
    
  5. 編輯 android/app/src/main/java/com/專案名稱/MainApplication.java,在上方 import 處加上:
    import com.magus.fblogin.FacebookLoginPackage;
    

    然後在 new MainReactPackage(), 之後,加入

    new FacebookLoginPackage()
    
  6. 編輯 android/app/src/main/res/values/strings.xml(字串變數檔,若想要用 react-native-config 也是可以的),加入以下內容:
    <resources>
        <string name="app_name">{Your_App_Name}</string>
        <string name="fb_app_id">{FB_APP_ID}</string>
        <string name="fb_login_protocol_scheme">fb{FB_APP_ID}</string>
    </resources>
    

    其中 {Your_App_Name}{FB_APP_ID}fb{FB_APP_ID} 請依據實際情況填入。

  7. 編輯 android/app/src/main/AndroidManifest.xml,在 <application></application> 區塊中,加入以下內容:
    <!--add FacebookActivity-->
    <activity tools:replace="android:theme"
        android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Translucent.NoTitleBar"/>
    
    <!--add CustomTabActivity-->
    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="@string/fb_login_protocol_scheme" />
        </intent-filter>
    </activity>
    
    <!--reference your fb_app_id-->
    <meta-data
        android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/fb_app_id"/>
    

    這邊的 @string/變數 會去讀在步驟 6 中設定的字串。

終於 Android 的部份也設定完成囉!

緊接著我們來設定 react-native-google-signin

react-native-google-signin

  1. 安裝
    yarn add react-native-google-signin
    
  2. Link
    react-native link react-native-google-signin
    

iOS

  1. 打開 node_modules/react-native-google-signin/,找到 RNGoogleSignin.xcodeproj 檔案,將它複製到 Xcode 專案的 Libraries 目錄底下。2017-05-29 9 48 13
  2. 切換至 Build Phases 頁籤,找到 Link Binary With Libraries 展開它,點擊 + 並加入 libRNGoogleSignin.aAddressBook.frameworkSafariServices.frameworkSystemConfiguration.frameworklibz.tbd
  3. 一樣在 node_modules/react-native-google-signin/ 目錄下找到 ios/GoogleSdk/,將它複製到 Xcode 專案下。(在跳出的視窗中請勾選 Copy items if needed,以及確定 Added foldersCreate groups

    2017-05-23 10 45 29

    2017-05-24 11 13 16

  4. 接著在 Link Binary With Libraries,一樣點擊 + 加入 GoogleSdk 的檔案(若沒有自動被加入的話),完成如圖:

    image

  5. 連至 Add Google Services | Google Developers,往下捲動找到 Get a configuration file 按鈕,點擊它。
  6. 設定 Google 應用程式。

    2017-05-23 11 16 15

  7. 啟用 Google Sign-in 功能,請依據實際情況填入 build ID。

    2017-05-23 11 17 13

  8. 最後就可以下載 GoogleService-Info.plist

    2017-05-23 11 17 53

  9. 打開剛下載的 GoogleService-Info.plist,找到 REVERSED_CLIENT_IDbundle id 的值,在 Info 頁籤最下方的 URL Types 新增兩組分別填入:

    2017-05-23 11 23 43

  10. 接著編輯 ios/專案名稱/AppDelegate.m,在 #import "AppDelegate.h" 之後加入(如果發現已經在 link 階段加入過的話,請略過此步驟):
    #import <RNGoogleSignin/RNGoogleSignin.h>
    
  11. 然後在 react-native-facebook-signin 的步驟中曾經在下方加入過 openURL 的 function,請將最後 return 的那行改為:
    return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                          openURL:url
                                                sourceApplication:sourceApplication
                                                       annotation:annotation
           ]
           || [RNGoogleSignin application:application
                                  openURL:url
                        sourceApplication:sourceApplication
                               annotation:annotation
              ];
    

再來換 Android 的設定。

Android

  1. 請確定 Android SDK 已經安裝這些套件:image
  2. 打開 Start Integrating Google Sign-In into Your Android App,往下捲動找到 Get a configuration file,點擊前往 Google 應用程式設定。
  3. 類似 iOS 的步驟,請依據實際情況選擇應用程式名稱、填入 package name。

    2017-05-23 11 28 42

  4. 填入 Android 簽名憑證的 SHA-1:

    2017-05-23 11 31 57

    若不知道怎麼找到這串碼的話,請參考 Authenticating Your Client。其中簽名金鑰的位置請依據實際情況填入。

  5. 最後就可以下載 google-services.json 了,請將它放到專案目錄底下的 android/app/ 目錄中。

    2017-05-23 11 32 21

  6. 編輯 android/settings.gradle,檢查是否有下方的 code,若無請加入。
    include ':react-native-google-signin', ':app'
    project(':react-native-google-signin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-google-signin/android')
    
  7. 編輯 android/build.gradle,在 dependencies 區塊中加入:
    classpath 'com.google.gms:google-services:3.0.0'
    
  8. 編輯 android/app/build.gradle,請確認是否有下方的 code:在 dependencies 區塊中:
    compile(project(":react-native-google-signin")){   // 若已有此行,但沒有 exclude group 請自行加入
        exclude group: "com.google.android.gms"  // 務必加入
    }
    compile 'com.google.android.gms:play-services-auth:10.0.1' // 至少需要 9.0.0 版本
    

    dependencies 區塊後,整個檔案最後一行加入:

    apply plugin: 'com.google.gms.google-services'
    
  9. 編輯 MainApplication.java,檢查是否有以下 code:
    import co.apptailor.googlesignin.RNGoogleSigninPackage;
    

    然後在 new MainReactPackage(), 下方是否有:

    new RNGoogleSigninPackage()
    
  10. 確認 android/gradle/wrapper/gradle-wrapper.properties 中是否有此行:
    distributionUrl=https\://services.gradle.org/distributions/gradle-2.14-all.zip
    

這部份的設定大概就到這邊結束了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *