Help us understand the problem. What is going on with this article?

Flutter で Yahoo! JAPAN ID のログインを実装する

Yahoo JAPAN さんがFirebase Authenticationを使ってFlutter製アプリにYahoo! JAPAN IDでログインしてみるという記事を書いてくださっているので、この記事通りに進めるとFirebase Authenticationであっさり実装できますが、Flutter webであったり、Desktop に流用したいのでSDKは使わないでWebViewを介した認証方式を実装してみました。

Yahoo! ID 連携 v2 を使用して実装します。認証の流れはHybridフローを採用しましたOAuthの説明は書かないのでわからない方は調べてみてください。
認証の流れは

となります。

実装

1.ユーザー認証リクエストをして、初期ページのURLを取得する

初期ページ表示のためのURLを取得します。

apiKey callbackUri はYahoo!デベロッパーネットワークに記載されています。

Map<String, String> params = {
    'response_type': 'code token',
   'client_id': apiKey,
   'redirect_uri': callbackUri,
   'scope': 'openid profile email',
   'nonce': dtNow.toString(),
 };

String requestParams = '';
params.forEach((String k, String v) {
  if (requestParams == '') {
    requestParams += '$k=';
  } else {
    requestParams += '&$k=';
  }

  if (k == 'response_type' || k == 'redirect_uri' || k == 'scope') {
    requestParams += Uri.encodeComponent(v);
  } else {
    requestParams += v;
  }
});

2.WebViewで初期ページを表示する

今回はwebview_flutterを使用します

他にflutter_webview_pluginflutter_inappbrowserもあります。

好きなプラグインで実装してください。

1で取得したURLでユーザー認証・同意画面が表示されます。

return Scaffold(
  appBar: AppBar(title: Text('Yahoo! アカウント連携')),
  body: WebView(
    initialUrl: 初期ページのURL,
    javascriptMode: JavascriptMode.unrestricted,
    navigationDelegate: (NavigationRequest request) async {
      /// URLの遷移をハンドリングできます
      if (request.url.startWith(callbackUrl)) {
        final accessToken = request.url.split('#').last;
        await login(accessToken);
      }
      return NavigationDecision.navigate;
    }
  ),
);

3.アクセストークンを取得する

ユーザーが同意したら Yahoo!側から Access Token、ID Token、Authorization Code が返ってきます。この続きの処理はサーバーサイドの処理に合わせて、いい感じに処理してください。

サーバーサイドの実装の代わりにFirebase Authenticationを使うこともできます。

Future<void> login(String tokens) async {
  Map<String, String> params = {};
  tokens.split('&').forEach((String param) {
        params[param.split('=').first] = param.split('=').last;
  });

  /// 認証サーバの処理に合わせて必要な情報を送信する処理を書く
}

後日サーバーサイドの処理の記事も書きます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした