Flutter x FirebaseでSign in with Appleはクリックとコピペだけで出来る！手順を徹底解説するよ！

Apple

2020.06.08

概要

サードパーティへのログインをしているアプリではSign in with Appleへの準拠が
2020年6月30日までに必要となります。

はじめに - Appleでサインイン - Apple Developer

Appleでサインインを利用すれば、Apple IDでAppやWebサイ&#124...

あと1ヶ月を切りましたね！

「やらなきゃいけないのは分かってるけどどうやれば良いか分からない…。」

この記事では、そんなあなたのために
Flutter x Firebase x Sign in with Appleについて詳しく解説しました！

あなたがやることは
クリックとコピペのみです！
めっちゃ簡単！

前提

今回の記事では、Firebaseプロジェクトは作成されている言う前提で書かれております。
もし、まだでしたら下記からお願いします！
2,3分で出来ると思います。

【超簡単！】FlutterでFirebaseを使って爆速コーディング！〜登録から認証まで〜

概要みなさん、Firebase使ってますか？「個人開発で何かを開発して世に出してみたい！」って欲望のある人は確実に使った方が良いと思います。めちゃくちゃ便利ですよ。チーム開発した事がある人はすごさわかると...

今回のソースコード

例によって、サンプルコードはgithubにあげてあります。
firebase_sign_in_with_apple ブランチに移動して

・bundleID
・plist

を設定すればすぐに動きます。

GitHub - daiki1003/firebase_sample: This is firebase sample created with flutter.

This is firebase sample created with flutter. Contribute to daiki1003/firebase_sample development by creating an account on GitHub.

ここからの流れ

以下の5ステップとなります。
どれもクリック or コピペで出来ます！

1. Apple側でSign in with Appleの設定
2. Firebase側でSign in with Appleの設定
3. Flutter側でSign in with Appleの設定
4. Sign in with Appleを表示してログインしてみる
5. Flutter側でSign in with Appleによる情報をFirebaseに送信

Apple側でSign in with Appleの設定 [iOS Dev Center] Sign in with Appleに対応したAppIDを生成する

細かいAppIDの生成の方は割愛させていただきます。

ただし、一点だけ注意事項があります。
生成の過程で「Capabilities」を設定する項目があるのですが、
この際にSign in with Appleのチェックを必ず入れてください。

[Xcode] Capabilitiesに Sign in with Apple の追加

[project_root]/iOS/Runner.xcworkspaceを開く

「Signing & Capabilities」 -> 「+ Capability」の選択

Sign in with Appleを追加し、一覧に表示されることを確認する

Bundle Identifierが正しく設定されていることを確認する

Bundle Identifierが先ほど作ったSign in with Appleに対応したものが設定されていることを確認してください。
設定されていなければここで設定してください。

Firebase側でSign in with Appleの設定

Firebaseコンソールにアクセス

ログイン - Google アカウント

Authenticationを選択

Sign-in Methodの選択

Appleの選択

「有効にする」に変更

「保存する」を選択

これで、Firebase側の設定は終わりです。
本当Firebase、お前ってやつは…。簡単すぎるよ。

Flutter側でSign in with Appleの設定

apple_sign_inのインストール

apple_sign_in | Flutter Package

こちらをインストールしてください。
インストールの仕方がわからない方はこちらの記事からどうぞ。

【超簡単！】Flutterのパッケージのインストール方法を説明するよ！

概要 Flutter(Dart)で画像のクリッピングするコードが書けますか？ Flutter(Dart)でhttp通信するコードが書けますか？大丈夫、書けなくて良いんです。 Flutterでは、色んな人が使いそ...

firebase_authのインストール

firebase_auth | Flutter Package

Flutter plugin for Firebase Auth, enabling Android and iOS authentication using passwords, phone numbers and identity providers like Google, Facebook and Twitte...

まだの人はfirebase_authもインストールしておいてください！

これで、準備完了です！
多分4分くらいですよね？笑
では早速コーディングにまいりましょう！

Sign in with Appleを表示してログインしてみる

表示部分

import 'package:apple_sign_in/apple_sign_in.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Authentication'),
    ),
    body: Center(
      child: AppleSignInButton(
        onPressed: logIn,
      ),
    ),
  );
}

めちゃくちゃ簡単ですね。
先ほど、インストールした apple_sign_in パッケージに
AppleSignInButton と言うWidgetがあるのでそれを表示するだけです。

注意

Page Not Found - Apple Developer

The page you requested does not exist.

なので、自分で作ることはできません。

認証部分

void logIn() async {
  final AuthorizationResult result = await AppleSignIn.performRequests([
    AppleIdRequest(requestedScopes: [Scope.email, Scope.fullName])
  ]);

  switch (result.status) {
    case AuthorizationStatus.authorized:
      print('success');
      OAuthProvider oauthProvider = OAuthProvider(providerId: 'apple.com');
      final credential = oauthProvider.getCredential(
        idToken: String.fromCharCodes(result.credential.identityToken),
        accessToken:
            String.fromCharCodes(result.credential.authorizationCode),
      );
      FirebaseAuth.instance.signInWithCredential(credential);
      break;

    case AuthorizationStatus.error:
      print("error: ${result.error.localizedDescription}");
      break;

    case AuthorizationStatus.cancelled:
      print('cancelled');
      break;
  }
}

認証時は、 AppleSignIn.performRequests を呼び出します。
こちらが Future<AuthorizationResult> を返すので、
awaitしてAuthorizationResultを取得出来るまで待ちます。

取得出来たらstatusで成功/失敗を判定します。

Flutter側でSign in with Appleによる情報をFirebaseに送信

さて、成功した場合はFirebaseAuthに認証情報を渡してあげなければいけません。
それが AuthorizationStatus.authorized の部分です。

OAuthProvider oauthProvider = OAuthProvider(providerId: 'apple.com');
final credential = oauthProvider.getCredential(
  idToken: String.fromCharCodes(result.credential.identityToken),
  accessToken: String.fromCharCodes(result.credential.authorizationCode),
);
FirebaseAuth.instance.signInWithCredential(credential);

OAuthProviderインスタンスを生成し、
そのインスタンスのgetCredentialメソッドを用いて認証情報を取得します。
取得された Credential をFirebaseAuth.instanceに渡して終了です。