search
LoginSignup
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

flutterunivKBOYのFlutter大学 Advent Calendar 2020 Day 24

posted at

updated at

Organization

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

はじめに

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

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

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

今回つくったものはこちら
今回作ったもの.gif
真ん中のボタンをクリックするとGitHubの認証ページが立ち上がり、認証が完了すると別のページに移動する、という簡易的なログイン機能を実装しました。
この実装に必要な手順をまとめてみたので、GitHubログインの実装を考えている方の参考になれば幸いです。

ではいきましょう!

前提条件

・Flutter webの環境構築が終了していること
環境構築の参考記事
・FlutterプロジェクトとFirebaseの連携が終了していること
Firebase連携の参考記事(Flutter web)

Firebase コンソールの設定

Firebaseコンソールに移動し、「Authentication」→「Sign-in method」を選択します。
スクリーンショット 2020-12-21 8.55.10.png
「Sign-in method」内の「GitHub」を選択し、「有効にする」をオンにし、下部のURLをコピーする。
スクリーンショット 2020-12-21 8.55.20.png

GitHubでOAuthアプリを作成

次はGitHub側の設定を行います。
Authアプリの作成画面にアクセスし、必要項目を入力後、「Authorization callback URL」にFirebaseのコールバックURLを貼り付ける
スクリーンショット 2020-12-21 8.59.20.png
アプリの作成が終わると、クライアントIDとクライアントシークレットが生成されるので、こちらをコピーします
スクリーンショット 2020-12-21 9.00.38.png

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

スクリーンショット 2020-12-23 13.38.38.png

Firebase Authのライブラリ導入

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

index.html

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

認証部分のコード

かなり簡易的ではありますが、これだけでも認証が可能になります


  GithubAuthProvider githubProvider = GithubAuthProvider();

  void _signInWithGitHub() {
    setState(() {
      FirebaseAuth.instance.signInWithPopup(githubProvider);
    });

全体のコードはこちら

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();

  void _signInWithGitHub() {
    setState(() {
      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 {
                    _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

まとめ

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

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

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

【参考にした記事】
[Firebase] AuthenticationでGitHub認証 (Web編)
Flutter 1.9以降で認証プロバイダーとしてGoogleを使ったFirebaseログインを実装する

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3
Help us understand the problem. What are the problem?