【Flutter Web × Firebase Auth】GitHubログインを実装してみた

# はじめに
こんにちは！Flutter大学サロン生のダイゴです!

現在、Flutter Webを使って[KBOYさん](https://twitter.com/kboy_silvergym)のメンタリングサービスの開発に関わらせて頂いており、開発の中でFirebase Authを使ったGitHubログインを実装する機会があったので、簡易的な認証アプリを作り、記事にまとめてみました。

尚、半年前までプログラミングの「プ」の字も知らなかった未経験者の初Qiita記事なので、誤った記載などがあればご指摘頂けると幸いです。

**今回つくったものはこちら**
![今回作ったもの.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639342/f4a2d07c-fcbc-6406-9e03-ba9ff6f5e177.gif)
真ん中のボタンをクリックするとGitHubの認証ページが立ち上がり、認証が完了すると別のページに移動する、という簡易的なログイン機能を実装しました。
この実装に必要な手順をまとめてみたので、GitHubログインの実装を考えている方の参考になれば幸いです。

ではいきましょう！

## 前提条件
・Flutter webの環境構築が終了していること
→[環境構築の参考記事](https://qiita.com/kurun_pan/items/6349f6f38c837ee250b3)
・FlutterプロジェクトとFirebaseの連携が終了していること
→[Firebase連携の参考記事（Flutter web)](https://qiita.com/hiko1129/items/73ea988df0c537657b10)

## Firebase コンソールの設定
Firebaseコンソールに移動し、「Authentication」→「Sign-in method」を選択します。
![スクリーンショット 2020-12-21 8.55.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639342/ef41c134-17ae-9d5e-0d34-8f9560d612ff.png)
「Sign-in method」内の「GitHub」を選択し、「有効にする」をオンにし、下部のURLをコピーする。
![スクリーンショット 2020-12-21 8.55.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639342/2479f13d-54a7-4bec-e552-4f8690f6af64.png)

## GitHubでOAuthアプリを作成
次はGitHub側の設定を行います。
[Authアプリの作成画面](https://github.com/settings/applications/new)にアクセスし、必要項目を入力後、「Authorization callback URL」にFirebaseのコールバックURLを貼り付ける
![スクリーンショット 2020-12-21 8.59.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639342/50a34f6d-aadb-c690-7ce6-7bf548b8bd15.png)
アプリの作成が終わると、クライアントIDとクライアントシークレットが生成されるので、こちらをコピーします
![スクリーンショット 2020-12-21 9.00.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639342/2c2a307e-030e-c43b-57db-bba3b71b0d85.png)


コピーしたクライアントIDとクライアントシークレットをFirebaseのコンソールに貼り付け、保存します

![スクリーンショット 2020-12-23 13.38.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639342/b3caf387-8403-7fbc-82fd-582e745004d9.png)


## Firebase Authのライブラリ導入

[FirebaseAuthのライブラリ](https://pub.dev/packages/firebase_auth/install)
通常のFlutterアプリ同様に、pubspec.yamlでのpubgetを行ったあと、web/index.htmlファイルに以下のスクリプトを貼り付けます

```dart:index.html

<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>

```


## 認証部分のコード
かなり簡易的ではありますが、これだけでも認証が可能になります

```dart

  GithubAuthProvider githubProvider = GithubAuthProvider();

  Future _signInWithGitHub() {
    await FirebaseAuth.instance.signInWithPopup(githubProvider);
  }

```

全体のコードはこちら

```dart:index.html

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GithubAuthProvider githubProvider = GithubAuthProvider();

  Future _signInWithGitHub() async {
    await FirebaseAuth.instance.signInWithPopup(githubProvider);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                child: Text('Login with GitHub'),
                onPressed: () {
                  try {
                    await _signInWithGitHub();
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) {
                          return SecondPage();
                        },
                      ),
                    );
                  } catch (e) {
                    print('エラーです');
                  }
                })
          ],
        ),
      ),
    );
  }
}

/// 認証後のページ
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SecondPage'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Succeed!!!',
              style: TextStyle(
                fontSize: 50,
              ),
            )
          ],
        ),
      ),
    );
  }
}

```
認証後、Firebaseのコンソールにユーザーが作成されていれば成功です。
![スクリーンショット 2020-12-23 14.56.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639342/a6a8786f-8fe5-65ad-72ad-fcedf3867067.png)

# まとめ
実装前までは「外部サービスの認証機能とか難しそう…」と根拠もなく不安でしたが、やってみると以外にすんなりと実装ができたので良かったです。

本来であれば、冒頭にも述べたメンタリングサービスのリリース告知などができればと思っていましたが、まだ具体的なリリース日の目処が立っていないので、今回は実装の中で学んだことを記事にしてみました。

最後まで読んでくださり、ありがとうございました！

【参考にした記事】
[[Firebase] AuthenticationでGitHub認証 (Web編)](https://blog.katsubemakito.net/firebase/firebase-authentication-github-web1)
[Flutter 1.9以降で認証プロバイダーとしてGoogleを使ったFirebaseログインを実装する](https://qiita.com/kendji/items/2954b98945bb5790294f)