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

react-native-facebook-login

安裝 react-native-facebook-login
```
yarn add react-native-facebook-login
```

打開套件目錄

open node_modules/react-native-facebook-login

iOS

在 Xcode 中，把步驟 2 中的 RCTFBLogin.xcodeproj 檔案拖曳到專案中的 Libraries 目錄。
確定 Target 是專案本身、而非 react-native-facebook-login 套件，接著切換到 Build Phases 頁籤，展開 Link Binary With Libraries，點擊下方的 + 按鈕，鍵入 libRCTFBLogin.a 找到它，加入。
接下來要加入 Facebook SDK 到 Xcode 專案中。在專案目錄下透過 open node_modules/react-native-facebook-login/FacebookSDK 指令打開 FacebookSDK 資料夾。
確定在 Project Navigator 項目（如圖）中：

然後在專案名稱上點右鍵，選擇 New Group，並輸入 Frameworks（若已經有此資料夾的話，此步驟可省略）。
在步驟 5 中打開的資料夾中，找到 FBSDKCoreKit.framework、FBSDKLoginKit.framework 與 FBSDKShareKit.framework 三個檔案，將他們拖曳到步驟 6 中建立的 Frameworks 目錄中。
切換到 Build Settings 頁籤，捲動尋找 Search Paths 中的 Framework Search Paths，加入 $(SRCROOT)/../node_modules/react-native-facebook-login/FacebookSDK
接著編輯 ios/專案名稱/AppDelegate.m，在 #import "AppDelegate.h" 之下，加入：
```
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>
```

往下找到 didFinishLaunchingWithOptions 這個 function，將最後

return YES;

的部份改為

return [[FBSDKApplicationDelegate sharedInstance] application:application
                                  didFinishLaunchingWithOptions:launchOptions];

然後在 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];
}

以上 FacebookSDK iOS 的安裝完畢，還剩一些設定 iOS 的部份就完成囉。接下來要進行 Facebook 應用程式相關的設定，先去 Facebook Apps – Quick Start for iOS，建立或是選擇既有的應用程式。在 Facebook 應用程式設定過程中，需要填入 bundle ID，可在 General 中找到：

接著以該應用程式的資訊，請編輯 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

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

Key Hashes 則可透過步驟中的提示，使用 keytool 指令找到。
確定已經透過 yarn 或 npm 安裝了 react-native-facebook-login。

編輯 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')

編輯 android/app/build.gradle，在 dependencies { } 區塊中加入以下內容：
```
compile project(':react-native-facebook-login')
```
編輯 android/app/src/main/java/com/專案名稱/MainApplication.java，在上方 import 處加上：
```
import com.magus.fblogin.FacebookLoginPackage;
```
然後在 new MainReactPackage(), 之後，加入
```
new FacebookLoginPackage()
```
編輯 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} 請依據實際情況填入。

編輯 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

安裝
```
yarn add react-native-google-signin
```

Link

react-native link react-native-google-signin

iOS

打開 node_modules/react-native-google-signin/，找到 RNGoogleSignin.xcodeproj 檔案，將它複製到 Xcode 專案的 Libraries 目錄底下。
切換至 Build Phases 頁籤，找到 Link Binary With Libraries 展開它，點擊 + 並加入 libRNGoogleSignin.a、AddressBook.framework、SafariServices.framework、SystemConfiguration.framework 及 libz.tbd。
一樣在 node_modules/react-native-google-signin/ 目錄下找到 ios/GoogleSdk/，將它複製到 Xcode 專案下。（在跳出的視窗中請勾選 Copy items if needed，以及確定 Added folders 為 Create groups）
接著在 Link Binary With Libraries，一樣點擊 + 加入 GoogleSdk 的檔案（若沒有自動被加入的話），完成如圖：
連至 Add Google Services | Google Developers，往下捲動找到 Get a configuration file 按鈕，點擊它。
設定 Google 應用程式。
啟用 Google Sign-in 功能，請依據實際情況填入 build ID。
最後就可以下載 GoogleService-Info.plist
打開剛下載的 GoogleService-Info.plist，找到 REVERSED_CLIENT_ID 與 bundle id 的值，在 Info 頁籤最下方的 URL Types 新增兩組分別填入：
接著編輯 ios/專案名稱/AppDelegate.m，在 #import "AppDelegate.h" 之後加入（如果發現已經在 link 階段加入過的話，請略過此步驟）：
```
#import <RNGoogleSignin/RNGoogleSignin.h>
```

然後在 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

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

若不知道怎麼找到這串碼的話，請參考 Authenticating Your Client。其中簽名金鑰的位置請依據實際情況填入。
最後就可以下載 google-services.json 了，請將它放到專案目錄底下的 android/app/ 目錄中。

編輯 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')

編輯 android/build.gradle，在 dependencies 區塊中加入：
```
classpath 'com.google.gms:google-services:3.0.0'
```

編輯 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'

編輯 MainApplication.java，檢查是否有以下 code：
```
import co.apptailor.googlesignin.RNGoogleSigninPackage;
```
然後在 new MainReactPackage(), 下方是否有：
```
new RNGoogleSigninPackage()
```

確認 android/gradle/wrapper/gradle-wrapper.properties 中是否有此行：

distributionUrl=https\://services.gradle.org/distributions/gradle-2.14-all.zip

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

Pages: 1 2 3 4 5

Partner Studio

patw 的技術筆記

react-native-facebook-login

iOS

Android

react-native-google-signin

iOS

Android

發佈留言取消回覆

react-native-facebook-login

iOS

Android

react-native-google-signin

iOS

Android

發佈留言 取消回覆

發佈留言取消回覆