[Parse][iOS] Facebook / Twitter アカウントでサインアップする

2014.02.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Facebook / Twitter アカウントでサインアップ

Parse には Facebook や Twitter のアカウントからユーザーを作成する便利機能があります。この機能を使うと面倒な”ユーザー登録”という機能をパパっと実装することができます。既存アカウントを使うことができるので、ユーザー側から考えても便利な機能ですよね。

この機能を使うには Facebook アプリ登録と Twitter アプリ登録が必要ですが、Facebook アプリ登録は私自身なかなか久しぶりにやったので、少し躓いたところもありました。ということで、Facebook / Twitter アカウントでサインアップする機能を使うまでの手順をまとめてみました。

事前準備

事前準備として、以下の手順は済ませている前提で進めます。

Twitter のアプリ登録するには、Twitter アカウントにモバイルメールアドレスを登録している必要があるんですね。いつの間に…。

Facebook でサインアップする

Facebook アプリを作る

まず Facebook でアプリを作ります。Display Name と Namespace は適当に。あとで変更もできます。

parse_fb01

次に左メニューから「設定」を選びます。アプリIDはあとでいろいろな場面で使うのでメモしておきましょう。また「Add Platform」で iOS アプリを追加し、Bundle ID にこれから作る予定のアプリの Bundle ID を入力してください。

parse_fb02

これで Facebook 側は OK です。

Parse アプリの設定を変更する

次に Parse アプリの設定を変更します。Dashboard にアクセスし、対象の Parse アプリの設定画面を開きます。そして左メニューから「User authentication」を選択し、「Facebook」セクションの「Facebook Application IDs」に先ほどメモった Facebook アプリの ID を入力します。「IDs」となっていることから分かる通り、カンマ区切りで複数登録することもできます。

parse_fb03

プロジェクトの設定を変更する

次に Xcode プロジェクトを開き、Info.plist に Facebook に必要な設定値を追加します。

parse_fb04

追加する設定値は次のとおりです。

FacebookAppID Facebook のアプリID
FacebookDisplayName Facebook のアプリの DisplayName
URL types URL Schemes に fb + Facebook のアプリID を指定

実装する

あとは実装です!まずは AppDelegate クラスを開き application:didFinishLaunchingWithOptions: メソッド、applicationDidBecomeActive: メソッド、application:openURL:sourceApplication:annotation: メソッドに追加します。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // (省略) Parse の初期設定とか...
    
    // Facebook
    [PFFacebookUtils initializeFacebook];
    
    return YES;
}
- (void)applicationDidBecomeActive:(UIApplication *)application
{
    // Facebook
    [FBAppCall handleDidBecomeActiveWithSession:[PFFacebookUtils session]];
}
- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
    return [FBAppCall handleOpenURL:url
                  sourceApplication:sourceApplication
                        withSession:[PFFacebookUtils session]];
}

次に適当な ViewController でサインアップ処理を実装します。

- (IBAction)facebookButtonTapped:(id)sender {
    // パーミッション
    NSArray *permissionsArray = @[ @"user_about_me", @"user_relationships", @"user_birthday", @"user_location"];
    // Facebook アカウントを使ってログイン
    [PFFacebookUtils logInWithPermissions:permissionsArray block:^(PFUser *user, NSError *error) {
        if (!user) {
            if (!error) {
                NSLog(@"Facebook ログインをユーザーがキャンセル");
            } else {
                NSLog(@"Facebook ログイン中にエラーが発生: %@", error);
            }
        } else if (user.isNew) {
            NSLog(@"Facebook サインアップ & ログイン完了!");
        } else {
            NSLog(@"Facebook ログイン完了!");
        }
    }];
}

NSArray で使いたいパーミッションを指定します。指定できるパーミッションとアクセスできる情報はこちらを参考にしてください。コールバックで渡される PFUserNSError を見て、成功したか失敗したか判定します。isNew プロパティが YES の場合はサインアップ&ログインを実行したときです。一度サインアップしたあと、また同じようにコールすると NO が返るようになります。

実行する

実行してみましょう。iOS シミュレータまたは iOS デバイスの Facebook アカウントを登録した状態でログイン処理を実行してください。初回はパーミッションの認証ダイアログが表示されます。「OK」をタップするとサインアップ&ログインが完了するはずです。

parse_fb05

Twitter でサインアップする

それでは次に Twitter です。Facebook より簡単です。

Twitter のアプリを作る

まずは Facebook と同様に Twitter のアプリを登録します。Name、Description、Website、Callback URL を適当に入力します。Callback URL は有効な URL が必要です。

parse_tw01

登録が完了したら「API Keys」タブを開き「API key」と「API secret」をメモります。あとでいろいろと使います。

parse_tw02

Parse アプリの設定を変更する

次に Parse アプリの設定を変更します。Dashboard にアクセスし、対象の Parse アプリの設定画面を開きます。そして左メニューから「User authentication」を選択し、「Twitter」セクションの「Twitter Consumer Keys」に先ほどメモった Twitter アプリの API key を入力します。「Keys」となっていることから分かる通り、カンマ区切りで複数登録することもできます。

parse_tw03

実装する

あとは実装です!まずは AppDelegate クラスを開き application:didFinishLaunchingWithOptions: メソッドに追加します。YOUR_API_KEYYOUR_API_SECRET は先ほどメモったやつに書き換えてください。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // (省略) Parse の初期設定とか...
    
    // Twitter
    [PFTwitterUtils initializeWithConsumerKey:@"YOUR_API_KEY"
                               consumerSecret:@"YOUR_API_SECRET"];
    
    return YES;
}

次に適当な ViewController でサインアップ処理を実装します。Facebook と全く一緒ですね!

- (IBAction)twitterButtonTapped:(id)sender {
    [PFTwitterUtils logInWithBlock:^(PFUser *user, NSError *error) {
        if (!user) {
            if (!error) {
                NSLog(@"Twitter ログインをユーザーがキャンセル");
            } else {
                NSLog(@"Twitter ログイン中にエラーが発生: %@", error);
            }
        } else if (user.isNew) {
            NSLog(@"Twitter サインアップ & ログイン完了!");
        } else {
            NSLog(@"Twitter ログイン完了!");
        }
    }];
}

実行する

実行してみましょう。サインアップ処理を実行すると、次のようなダイアログが表示されます。Twitter のアカウントでログインすると、サインアップ&ログインが完了するはずです。

parse_tw04

登録済みのアカウントにリンクさせる

既にメールアドレスで登録済みのユーザーアカウントに、あとから Facebook / Twitter アカウントをリンクさせることもできます。この機能を使うと、既にメールアドレスで登録済みのユーザーアカウントへのログインを Facebook / Twitter 経由でログインできるようになったり、ユーザーアカウントにリンクされた Facebook / Twitter アカウントを使って、Facebook や Twitter の API が叩けるようになります。以下は Facebook の場合のコードですが、Twitter もほぼ同じコードでいけます。

// リンクさせる場合
if (![PFFacebookUtils isLinkedWithUser:user]) {
    [PFFacebookUtils linkUser:user permissions:nil block:^(BOOL succeeded, NSError *error) {
        if (succeeded) {
            NSLog(@"Facebook にリンク成功!");
        }
    }];
}

// リンクを解除する場合
[PFFacebookUtils unlinkUserInBackground:user block:^(BOOL succeeded, NSError *error) {
    if (succeeded) {
        NSLog(@"Facebook のリンク解除完了!");
    }
}];

まとめ

ということで、Facebook と Twitter のアカウントでサインアップをしてみました。Facebook または Twitter アカウントを持っている人前提のサービスを作るには持ってこいですね!Android 編は後日書きます!

参考