[flutter2]nullsafetyなTwitter auth認証(fire base)

flutter界隈での鬼門はtwitterAuth認証でしょう。情報がない&パッケージがメンテされていないで毎回時間がかかってしまう。

当ブログでもだいぶ前に記事書いてますが、その内容だとflutter2では使えないですし、何よりiOSでストアへアップする際の審査申請で弾かれてしまいます。[UIWebView問題]

有名どころは「twitter_login」や「flutter_twitter_login」でしょうか。今回、どちらも使えなかったので最終的に自作することになりました。(いろんな記事を参考してます)

ちなみに、FirebaseAuthに必要な細かい必須処理等は省いています。その辺りは別記事を読んでください。

実装

まずはpubspec.yaml。多分大事なのはこれらです。他にもいるかも。バージョンは適宜最新版が使えるかどうか試してみてください。

  firebase_core: ^1.0.3
  firebase_auth: ^1.0.2  
  provider:  
  oauth1: ^2.0.0
  webview_flutter: ^2.0.4

早速、今回の実装コードを晒していきます。たびたび出てくるConstValuesはstaticに設定を定義しているだけなので、各自固定文字列に変更する等行ってください。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:oauth1/oauth1.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:provider/provider.dart';

class TwitterAuthUtil {
  static Future<TwitterAuthResult> login(BuildContext context) async {
    TwitterAuthResult result = await Navigator.push(context, MaterialPageRoute(builder: (context) => TwitterAuthStarter()));
    return result;
  }
}

class TwitterAuthStarter extends StatelessWidget {
  TwitterAuthStarter();

  @override
  Widget build(context) {
    return ChangeNotifierProvider(
      create: (context) => TwitterAuthController(),
      child: TwitterAuthPage(),
    );
  }
}

class TwitterAuthController with ChangeNotifier {
  bool isFirst = true;
  bool isDisposed = false;
  Widget webView = CircularProgressIndicator();

  @override
  void dispose() {
    isDisposed = true;
    super.dispose();
  }

  void changeIsFirst(bool first) {
    isFirst = first;
    notifyListeners();
  }

  void changeWebView(Widget value) {
    webView = value;
    notifyListeners();
  }
}

class TwitterAuthPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String callbackURI = ConstValues.callbackURI;
    final state = Provider.of<TwitterAuthController>(context);

    if (state.isFirst) {
      state.changeIsFirst(false);

      Future(() async {
        final clientCredentials = ClientCredentials(ConstValues.apiKey, ConstValues.apiSecret);
        final twitterPlatform = Platform(
          'https://api.twitter.com/oauth/request_token',
          'https://api.twitter.com/oauth/authorize',
          'https://api.twitter.com/oauth/access_token',
          SignatureMethods.hmacSha1,
        );

        //トークンをリクエスト後、認証ページURIをリクエスト。
        Authorization oauth = Authorization(clientCredentials, twitterPlatform);
        var requestTokenResponse = await oauth.requestTemporaryCredentials(callbackURI);
        var authorizationPage = oauth.getResourceOwnerAuthorizationURI(requestTokenResponse.credentials.token);

        var webView = WebView(
          initialUrl: authorizationPage,
          onPageStarted: (String url) async {
            // コールバック監視
            if (url.startsWith(callbackURI)) {
              final queryParameters = Uri.parse(url).queryParameters;
              final oauthToken = queryParameters['oauth_token'];
              final oauthVerifier = queryParameters['oauth_verifier'];
              if (null != oauthToken && null != oauthVerifier) {
                var response = await oauth.requestTokenCredentials(Credentials(oauthToken, ''), oauthVerifier);
                Navigator.pop(context, TwitterAuthResult(true, response.credentials.token, response.credentials.tokenSecret));
              } else {
                state.changeWebView(Text('login failed'));
              }
            }
          },
        );
        state.changeWebView(webView);
      });
    }

    return Scaffold(appBar: AppBar(), body: state.webView);
  }
}

class TwitterAuthResult {
  String token = '';
  String tokenSecret = '';
  bool isSuccessed = false;

  TwitterAuthResult(this.isSuccessed, this.token, this.tokenSecret);
}

上のコードを、自分はTwitterAuthUtil.dartという名前で作成しました。

呼び出す側はこんな感じ。

final authResult = await TwitterAuthUtil.login(context);
String token = authResult.token;
String tokenSecret = authResult.tokenSecret;

なかなかシンプルでいいですね!あとは他の認証と同じようにCredentialからUserを取得していく流れです。

まとめ

一度自分で実装すると、流れもわかっていい勉強になりますね。

レンタルサーバはConohaWINGが最強にオススメ!

muchilogでは今までいろんなレンタルサーバやSaaSを使ってきましたが、今では全てをConohaWINGにて運営しています。

■今まで使ってきたサービス一覧
・さくらレンタルサーバ(ベーシックプラン)
・カゴヤ
・Azure
・AWS

今ではこのブログは勿論、webサービスのバックエンドやアプリのサーバ機能もConohaWINGで動かしています。
そんなConohaWINGのメリットをいくつか紹介します!

【国内最速No.1】高性能レンタルサーバーConoHa WING

無料で最大2個の独自ドメインが使える!

サイト運営に必要な独自ドメインをなんと無料で取得することが可能です!これだけでも月100円以上は運営費が節約できます。

優れた速度と安定感

私がAzureやさくらを解約した大きな理由はこれ。Conohaは非常に安定して稼働しており、ダウンタイムがほぼ発生しません。発生した場合は潔くお知らせしてくれます。
また、このブログは勿論、バックエンドとして動いてるプログラムも処理速度が大幅に向上しました(体感で倍速以上)。 Azure等のSaaSからレンタルサーバに移行するって普通考えられませんよね?しかし実際に大きなメリットを感じているのです。

頻繁に開催されるキャンペーン

ConohaWINGは半額に迫るようなキャンペーンを頻繁に開催しています。このキャンペーンによって、性能的には業界トップクラスであるにも関わらず、 月額料金換算で最安値クラスで使えるのです。
基本的に長期一括契約の方がお得になるため、muchilogでは最長で契約することをオススメします。価格と性能のバランスを考えれば他に乗り換えることも考えれられませんし。

レンタルサーバは必須です!

web系のプログラミング学習を進める際には、レンタルサーバの契約は必須と思ってください。ローカルの環境と本番環境で動作が違うことは良くありますし、ポートフォリオを公開するのも大切です。

学習や制作に集中するためにも、満足度、速度、安定度全てのレベルが高いConohaWINGを最強にオススメします!

web系サービス開発会社に転職したい!

muchilogではIT系へ転職したいという方には「自社サービスを運営しているweb系企業」への転職をおすすめしています。

web系は「自由な社風」「成長できる環境」「ホワイトな労働条件」であることが多いからです。

そんなweb系企業への転職を確実にするためのプログラミングスクールが登場しました。


RUNTEQ

RUNTEQはただのスクールじゃない!

RUNTEQはweb系の開発会社。開発会社が運営するスクールなので必要とされる技術力は勿論習得可能。しかしそれだけではないのです。

特にweb系で転職・就職活動を行う際にはポートフォリオを求められることがあります。ポートフォリオとは自分自身の作品のことで、技術力や企画力を示すものです。

RUNTEQではポートフォリオの作成を企画段階からサポートしてくれます!

他のプログラミングスクールでは提携企業の派遣やアルバイトとして就職するしかなかったりもしますが、RUNTEQはあなたの市場価値を高める方法まで教えてくれるということですね。

また、RUNTEQが扱う教材はどれも第一線で当たり前に使われている技術。特に未経験者の独学ではどうしてもスキルセットに穴が出来てしまいます。その点RUNTEQは確実に現場力を養えます。

そして2020年2月〜2021年12月までの内定者の98%がweb系企業に内定しています。これはRUNTEQの指導力とサポートが優れていることの証拠でしょう。

まずは無料説明会に申し込んではいかがでしょうか?

RUNTEQ


Flutter
muchiをフォローする
MUCHILOG
タイトルとURLをコピーしました