🔥
【Flutter】アプリにGitHubログイン機能を付ける
はじめに
今回はFlutterにGitHubアカウントでログインする機能を実装したのでメモします。
TwitterやFacebookなど他のプロバイダでも手順はほぼ同じなので応用が効きます。
前提条件
- Firebaseプロジェクト作成済み
- Firebaseにアプリを登録済み
GitHubアプリの作成
Githubの開発者向け設定にアクセスします。
[OAuth Apps]タブをクリックします。
必須項目(アプリ名、ホームページURL)を入力してアプリを作成します。
コールバックURLはこの時点では適当で構いません。
作成したら、[Client ID]と[Client Secret]をコピーしておきます。
Firebaseコンソールの設定
FirebaseコンソールのAuthenticationに移動し、[はじめる]または[Sign-in method]タブを開きます。
プロバイダ一覧から[Github]を開き、[有効にする]にチェックします。
そして先ほどGithub側でコピーした[クライアントID]と[クライアント シークレット]をここに入力します。
コールバックURLはFirebaseとGithub側で合わせる必要があるため、
[認証コールバックURL]をコピーしてGithub側へ設定します。
必要パッヶージをインストール
GitHubへのログイン処理はgithub_sign_inパッケージを使用します。
pubspec.yaml
dependencies:
flutter:
sdk: flutter
firebase_core: ^0.5.3
firebase_auth: ^0.18.4+1
github_sign_in: ^0.0.3
FlutterFireの初期化
Firebaseパッケージの初期化処理が必須になったので忘れずにmain()関数に記述しておきます。
/lib/main.dart
･･･
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
･･･
GitHubログイン用クラスを作成
ログイン・ログアウトなどアカウントの認証処理を担うWrapperクラスを作ります。
コードはこちら
/lib/auth/github_auth.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:github_sign_in/github_sign_in.dart';
class GithubAuthUtil {
static final GitHubSignIn _github = GitHubSignIn(
clientId: '********',
clientSecret: '********',
redirectUrl: 'https://********.firebaseapp.com/__/auth/handler',
);
/// サインイン中か
static bool isSignedIn() => FirebaseAuth.instance.currentUser != null;
/// 現在のユーザー情報
static User getCurrentUser() => FirebaseAuth.instance.currentUser;
/// サインアウト
static void signOut() => FirebaseAuth.instance.signOut();
/// サインイン
static Future<User> signIn(BuildContext context) async {
final UserCredential credential = await signInWithGithub(context);
return credential.user;
}
static Future<UserCredential> signInWithGithub(BuildContext context) async {
final result = await _github.signIn(context);
final AuthCredential githubAuthCredential =
GithubAuthProvider.credential(result.token);
return await FirebaseAuth.instance
.signInWithCredential(githubAuthCredential);
}
}
使い方：
// 現在のユーザー情報を取得
User _user = GithubAuthUtil.getCurrentUser();
// 現在サインイン済みか
bool isSignedIn = GithubAuthUtil.isSignedIn();
// サインイン
GithubAuthUtil.signIn(context)
.then((user) => setState(() => _user = user));
// サインアウト
GithubAuthUtil.signOut();
動作確認
サインイン時にGitHub認証画面が表示され、認証に成功するとユーザー名やUID、Emailなどが取得できます。
Discussion