FlutterでFirebaseのTwitterログインを実装する
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を指定すれば使えるので良かったら使ってください。
全てはポテトのために