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


今回紹介するのは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](https://qiita-image-store.s3.amazonaws.com/0/36652/b30e5963-ddac-93a3-ad0b-12c7f074c28e.png)
とは言っても全部映りきっていませんが。もっとあります。

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

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

# Auth0の設定
登録、アプリの作成まで
https://auth0.com/
より何かしらのソーシャルでログインしてください。するとこんな画面が出てくると思うので、お好みのドメインと、お好きな場所を選択してください。
![スクリーンショット 2016-02-10 16.19.50.png](https://qiita-image-store.s3.amazonaws.com/0/36652/a661f809-3f29-2ba4-f9b3-406613995c68.png)
次にソーシャル選択画面がでてくるので、使いたいソーシャルを選択。ここでの選択はSandbox環境なので、KeyやSecletがなくてもログインできます。ここで選択しなくてもあとから自分でKeyとSecletを入力すれば使えます。
![スクリーンショット 2016-02-10 16.20.36.png](https://qiita-image-store.s3.amazonaws.com/0/36652/6abf10b4-7c09-d52d-7321-9befd43e5051.png)
次にNativeAppを選択
![スクリーンショット 2016-02-10 16.23.24.png](https://qiita-image-store.s3.amazonaws.com/0/36652/585267d0-cc4e-ad24-71a8-81fd2431dfe6.png)
次にReactNativeiOSを選択
![スクリーンショット 2016-02-10 16.23.31.png](https://qiita-image-store.s3.amazonaws.com/0/36652/77768daf-75b3-6cad-6279-53cf1dff7af3.png)

次の画面はskipしていいです。サーバサイドは今回使いません。すると下記のような文字列がでてくるので、それを後述のcallbackに設定します。
![スクリーンショット 2016-02-10 18.43.39.png](https://qiita-image-store.s3.amazonaws.com/0/36652/567008bd-642f-e7ed-112c-2b3ed590de33.png)
こんなかんじに
![スクリーンショット 2016-02-10 18.46.45.png](https://qiita-image-store.s3.amazonaws.com/0/36652/5821b980-dbab-8322-2cfc-53e78c9ba862.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](https://qiita-image-store.s3.amazonaws.com/0/36652/7352fa4c-d880-4c77-7442-a78c62651764.png)

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

```
npm install --save react-native-lock-ios
```
次にCocoapodをインストールします。
```
gem install cocoapods
```
`ios/Podfile`を作成し、下記の内容を記述します。

```shell: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 install`を`ios/`で実行。すると`<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](https://qiita-image-store.s3.amazonaws.com/0/36652/f6ee8b79-b70b-2991-0a51-ca8d772dc2c2.png)
しかし普通にコピペするとエラーになるので、`#import`を上の方に書きます。こんなふうに
![スクリーンショット 2016-02-10 19.58.50.png](https://qiita-image-store.s3.amazonaws.com/0/36652/21696b53-8646-56f6-08be-07af5ec62fa1.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](https://qiita-image-store.s3.amazonaws.com/0/36652/4824c57c-6ec4-dc84-b7c3-bc09662aa321.png)
外見はこんな感じ。これまでの苦労が全て一つのボタンに集約されています。クリックしてみましょう。
こんな画面がでてきたら成功です。
![スクリーンショット 2016-02-10 21.36.39.png](https://qiita-image-store.s3.amazonaws.com/0/36652/5fe0155f-9dea-279d-6e31-21fa28bd4e38.png)

あとはログインしていけば
![スクリーンショット 2016-02-10 19.53.52.png](https://qiita-image-store.s3.amazonaws.com/0/36652/24aec273-d09b-d8ea-32fb-9413f93958e0.png)
ログインしたサービスとそのIDが表示されます。フレンドリスト等が必要であれば、`token`より受け取れますので、RESTを使って取得しましょう。