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

MBaaSなParseで遊ぼう

#iOS

#Parse

#X（Twitter）

#Facebook

#iPhone

諏訪悠紀

2014.02.13

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

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

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

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

事前準備

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

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

Facebook でサインアップする

Facebook アプリを作る

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

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

これで Facebook 側は OK です。

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

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

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

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

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

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

実行する

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

Twitter でサインアップする

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

Twitter のアプリを作る

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

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

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

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

実装する

あとは実装です！まずは AppDelegate クラスを開き application:didFinishLaunchingWithOptions: メソッドに追加します。YOUR_API_KEY と YOUR_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 のアカウントでログインすると、サインアップ＆ログインが完了するはずです。

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

既にメールアドレスで登録済みのユーザーアカウントに、あとから 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 のリンク解除完了!");
    }
}];