Help us understand the problem. What is going on with this article?

[初心者向け]ReactNativeでTwitter,Facebookログインをするよ

More than 3 years have passed since last update.

今回紹介するのはauth0を使ったソーシャル認証。auth0とは簡単に言えば、Twitter,Facebook,Google等のログインをまとめてサポートしてくれる、サービスなんです。これを使うと、いちいちSDKをインストールせず、これ一つであらゆるソーシャルOauthができます。

忙しい人のためにgithubへpushしてありますので、そちらからどうぞ。

git clone https://github.com/tkshi/reactnative-auth0-sample
cd reactnative-auth0-sample
npm i
cd ios
pod install
open twitter.xcworkspace
cd ..
react-native start

auth0対応しているサービスはこちら
スクリーンショット 2016-02-10 16.03.19.png
とは言っても全部映りきっていませんが。もっとあります。

そして今回auth0を導入するのは、ReactNativeです。みなさんご存知のとおり、Reactでネイティブアプリを作れるツールですね。今回はiosを対象にします。Objective-c,Swift読めない方でもできるように書いてあります。

工程は大きく3つに分かれています。
- Auth0の設定
- Xcodeの設定
- ReactNativeの記述
Xcodeの設定が一番めんどくさいです。しかし、ReactNativeでネイティブモジュールを使う際には必ず必要になる工程ですので、もし覚えてなければ覚えておいた方がいいと思います。もう覚えている方はすんなりできると思います。

Auth0の設定

登録、アプリの作成まで
https://auth0.com/
より何かしらのソーシャルでログインしてください。するとこんな画面が出てくると思うので、お好みのドメインと、お好きな場所を選択してください。
スクリーンショット 2016-02-10 16.19.50.png
次にソーシャル選択画面がでてくるので、使いたいソーシャルを選択。ここでの選択はSandbox環境なので、KeyやSecletがなくてもログインできます。ここで選択しなくてもあとから自分でKeyとSecletを入力すれば使えます。
スクリーンショット 2016-02-10 16.20.36.png
次にNativeAppを選択
スクリーンショット 2016-02-10 16.23.24.png
次にReactNativeiOSを選択
スクリーンショット 2016-02-10 16.23.31.png

次の画面はskipしていいです。サーバサイドは今回使いません。すると下記のような文字列がでてくるので、それを後述のcallbackに設定します。
スクリーンショット 2016-02-10 18.43.39.png
こんなかんじに
スクリーンショット 2016-02-10 18.46.45.png
ここに表示されているdomainとclientIDはあとで使いますのでメモっておいてください。
以上でAuth0の設定は終わりです。では次が正念場です。Xcode、いきましょ。

Xcodeの設定

Cocoapodによるインストール

まずはios/<ProjectName>.xprojectを開きます。そしてLibraries/以下のファイルを全て削除してください。
次にXcodeのBuild settings>Linking>Other Linker Flags$(inherited)を追記してください。こんな具合に。
スクリーンショット 2016-02-10 19.39.13.png

いよいよauth0をインストールしていきます。まずはnpm

npm install --save react-native-lock-ios

次にCocoapodをインストールします。

gem install cocoapods

ios/Podfileを作成し、下記の内容を記述します。

Podfile
source 'https://github.com/CocoaPods/Specs.git'
pod 'React', :subspecs => [
  'Core', 
  'RCTImage', 
  'RCTNetwork', 
  'RCTText', 
  'RCTWebSocket'
  ], :path => '../node_modules/react-native'
pod 'LockReactNative', :path => '../node_modules/react-native-lock-ios'

pod installios/で実行。すると<Project>.xcworkspaceが現れるので、いったんXcodeを消し、<Project>.xcworkspaceを開きます。今後はこちらで作業することになります。

次でXcode設定は最後です。AppDelegate.mというファイルに、下記のコードを追加します。

#import <LockReactNative/A0LockReact.h>
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [[[A0LockReact sharedInstance] lock] handleURL:url sourceApplication:sourceApplication];
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler {
  return [[[A0LockReact sharedInstance] lock] continueUserActivity:userActivity restorationHandler:restorationHandler];
}

AppDelegate.mはここにあります。
スクリーンショット 2016-02-10 19.57.18.png
しかし普通にコピペするとエラーになるので、#importを上の方に書きます。こんなふうに
スクリーンショット 2016-02-10 19.58.50.png

ここまでで一度ビルドしてみてください。エラーがでるようなら何かがおかしいです。

ReactNativeの記述

ここまできたら、もう少しです。まずはログインボタンを設置しましょう。

npm install react-native-button --save

次にコールバックを設定します。ログインボタンが押された時の。lock.show()がそれにあたります。profileにリダイレクトされてきたデータが入ります。ログインプロバイダによって違うので、個別に確認してくださいね。

  _handlePress() {
    lock.show({
      connections: ['twitter', 'facebook']
    }, (err, profile, token) => {
      alert(profile.userId);
    });
  }

次にビューにボタンと、ハンドラを紐つけます。

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={this._handlePress}
        >
          Press Me!
        </Button>
      </View>
    );

スクリーンショット 2016-02-10 21.35.50.png
外見はこんな感じ。これまでの苦労が全て一つのボタンに集約されています。クリックしてみましょう。
こんな画面がでてきたら成功です。
スクリーンショット 2016-02-10 21.36.39.png

あとはログインしていけば
スクリーンショット 2016-02-10 19.53.52.png
ログインしたサービスとそのIDが表示されます。フレンドリスト等が必要であれば、tokenより受け取れますので、RESTを使って取得しましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away