TwitterAPI OAuth 認証でFirebaseのTwitterログインを実装しました。

Dart Packages に flutter_twitter_login というライブラリが公開されていますが、iOS側の処理でTwitterKitを使用していてヘッダーファイルが見当たらない等のエラーが多発したので、TwitterAPIを使うことにしました。

処理の流れ

実装

パラメータをハッシュ化するところやPOSTメソッドの処理はGitHubで確認してください。また、TwitterAPIの詳しい使い方は公式ドキュメントを参照してください。

1.リクエストトークンの要求

https://api.twitter.com/oauth/request_tokenにPOSTメソッドでリクエストを送ります。

final http.Response res = await _httpClient.post(
  'https://api.twitter.com/oauth/request_token',
  headers: <String, String> {     
    'Authorization': headerString,
  },
);
if (res.statusCode != 200) {
  throw StateError(res.body);
}
final Map<String, String> params = Uri.splitQueryString(res.body);
if (params['oauth_callback_confirmed'].toLowerCase() != 'true') {
  throw StateError('oauth_callback_confirmed mast be true');
}
return params;

2. 認証画面を表示する

WebView(
  initialUrl: 'https://api.twitter.com/oauth/authorize?oauth_token=${params['oauth_token']}',
  javascriptMode: JavascriptMode.unrestricted,
  navigationDelegate: (NavigationRequest request) {
    if (request.url.startsWith(_callbackUri)) {
      final String query = request.url.split('?').last;
      if (query.contains('denied')) {
         // キャンセル
       } else {
         final Map<String, String> res = Uri.splitQueryString(query);
         // resに入っているアクセストークンをFirebaseに送信する
       }
       return NavigationDecision.navigate;
     } else {
       return NavigationDecision.navigate;
     }
   },
),

3. Firebaseで認証する

final AuthCredential credential = TwitterAuthProvider.getCredential(
  authToken: oauthToken['oauth_token'],
  authTokenSecret: oauthToken['oauth_token_secret'],
);

final FirebaseUser user = await _auth.signInWithCredential(credential);

これがFirebaseのTwitterログインの一連の流れです。

ライブラリとして公開しました。Dart Packages には登録していませんが、gitを指定すれば使えるので良かったら使ってください。