【Flutter】flutter_web_authを使用してQiitaにログインする

はじめに

前にflutter_web_authについて記事を書きました。今回は、flutter_web_authを使用して、Qiitaにログイン、アクセストークン取得までしてみようと思います。
ブラウザでログインするとQiitaのAPIを使用するために必要なアクセストークンが取得できます。

アプリケーション登録

Qiitaのアカウントに、作成するアプリケーションを登録します。登録することで、Client ID、Client Secret IDを取得することができます。
またログイン後のリダイレクト先URLも設定することができます。

flutter_web_authはログイン時に、ログイン画面のWebページをブラウザで開いてログインします。ログイン後、自動的にリダイレクトURLにリダイレクトすることで、アプリ側に処理が戻ってきます。(スキーマでアプリを指定して起動させます。)

ログイン画面の表示

ボタンを押すと、ログイン画面がブラウザで表示されるようにしてみます。
以下のようなボタンを画面内に用意します。

　　　　　　　　　　ElevatedButton(
                  onPressed: () async {
                    final String clientId = dotenv.env['CLIENT_ID']!; // クライアントIDを書く
                    const scope = 'read_qiita write_qiita_team';
                    const state = "test";

                    final loginURL =
                        'https://qiita.com/api/v2/oauth/authorize?client_id=$clientId&scope=$scope&state=$state';

                    // 認証
                    final resutl = await FlutterWebAuth.authenticate(
                        url: loginURL,
                        callbackUrlScheme: 'testapp');
                    print(resutl);
                  },
                  child: const Text("ログイン"))

ここより、ログイン画面へのURL(ClientID, Scope, Stateは変数)を用意して、flutter_web_authに設定します。このとき、アプリケーション登録で登録したリダイレクトURLのスキーム(httpsの場所)も設定します。

※Androidで動作確認するには、以下のような対応がAndroidManifest.xmlに必要になります。

<!-- flutter_web_authの設定　追加 -->
        <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
            <intent-filter android:label="flutter_web_auth">
              <action android:name="android.intent.action.VIEW" />
              <category android:name="android.intent.category.DEFAULT" />
              <category android:name="android.intent.category.BROWSABLE" />
              <data android:scheme="testapp" />
            </intent-filter>
          </activity>

ログインボタンを押すと、ブラウザが開き、Qiitaのログイン画面が表示されます。ログインすると、指定しているスキームのアプリが開きます。
リダイレクトで帰ってきたURLにアクセストークンがついてきます。
このアクセストークンはQiitaのAPIを利用するときに使用します。

ログインボタン画面

ブラウザが開きログインする

おわりに

今回は実際にflutter_web_authを使用して、ログインしてアクセストークンを取得するところまで行いました。ログイン、アクセストークン取得ができたので、QiitaのAPIを使用したアプリ開発もやってみようと思います。