概要
サードパーティへのログインをしているアプリではSign in with Appleへの準拠が
2020年6月30日までに必要となります。
あと1ヶ月を切りましたね！
「やらなきゃいけないのは分かってるけどどうやれば良いか分からない…。」
この記事では、そんなあなたのために
Flutter x Firebase x Sign in with Appleについて詳しく解説しました！
あなたがやることは
クリックとコピペのみです！
めっちゃ簡単！
前提
今回の記事では、Firebaseプロジェクトは作成されている言う前提で書かれております。
もし、まだでしたら下記からお願いします！
2,3分で出来ると思います。
今回のソースコード
例によって、サンプルコードはgithubにあげてあります。
firebase_sign_in_with_apple ブランチに移動して
・bundleID
・plist
を設定すればすぐに動きます。
ここからの流れ
以下の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コンソールにアクセス
Authenticationを選択
Sign-in Methodの選択
Appleの選択
「有効にする」に変更
「保存する」を選択
これで、Firebase側の設定は終わりです。
本当Firebase、お前ってやつは…。簡単すぎるよ。
Flutter側でSign in with Appleの設定
apple_sign_inのインストール
こちらをインストールしてください。
インストールの仕方がわからない方はこちらの記事からどうぞ。
firebase_authのインストール
まだの人は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があるのでそれを表示するだけです。
注意
Sign in with Apple は厳密にボタンのデザインが決まっています。
なので、自分で作ることはできません。
認証部分
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に渡して終了です。
さいごに
いかがでしたでしょうか？
結構難しい印象があったかもしれませんが、
パッケージを使ったらあっという間でしたね。
Twitterフォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非@daiki1003のフォローお願いします♪
また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです！
コメント