Edited at

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

More than 1 year has 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を使って取得しましょう。