【Flutter】アプリにGitHubログイン機能を付ける

はじめに

今回はFlutterにGitHubアカウントでログインする機能を実装したのでメモします。
TwitterやFacebookなど他のプロバイダでも手順はほぼ同じなので応用が効きます。

前提条件

1. Firebaseプロジェクト作成済み
2. 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などが取得できます。