【Flutter】WebでGoogle認証しようとしたらエラーが出た

image

はじめに

https://zenn.dev/knaka/articles/1a12cebe46c77f

上記の記事を参考にFlutter webででGoogle認証しようとしたところ途中でエラーが出て詰まってしまったので、その時に行った対処法を紹介します。

詰まったところ

  <meta name="google-signin-client_id"
    content="[MyClientID].apps.googleusercontent.com" />

上記のようにindex.htmlにclient_idを入れflutter側でsignInコードを作成しました。

flutterをビルドしてsignInボタンを押すと以下のエラーが出ました。

エラー

PlatformException(idpiframe_initialization_failed, Not a valid origin for the client: http://localhost:65010 has not
been registered for client ID [MyClientID].apps.googleusercontent.com.

Please go to https://console.developers.google.com/ and register this origin for your project's client ID.,
https://developers.google.com/identity/sign-in/web/reference#error_codes, null)

クライアントID [MyClientID].apps.googleusercontent.com に対して登録されていません。https://console.developers.google.com/、このオリジンをプロジェクトのクライアントIDに登録してください、https://developers.google.com/identity/sign-in/web/reference#error_codes

解決方法

以下の記事が参考になりました。 https://qiita.com/kenken1981/items/9d738687c5cfb453be19

どうも、Google認証の「OAuth 2.0 クライアント ID」は、一度あるポートで使うと、その後で違うポートで利用することはできないらしい。

一度も違うポートで使った記憶は自分にはないが・・

1.クライアントIDを新規作成

上記の記事を参考にして、新しいクライアントIDを作成。

アプリケーションの種類:ウェブアプリケーション

名前:Web Client(任意の名前にしてください)

承認済みの JavaScript 生成元:http://localhost:5555

保存ボタンを押す。

2.index.htmlにクライアントIDを設定し直す

  <meta name="google-signin-client_id"
    content="[MyClientID].apps.googleusercontent.com" />

上記のように設定し、index.htmlに新しく生成されたクライアントIDを入れておく

3.再ビルド

上記で設定したlocalhostの番号でflutter runを実行

flutter run --web-port 5555

エラーが解消されてサインインできるようになりました!

参考

https://zenn.dev/knaka/articles/1a12cebe46c77f https://qiita.com/kenken1981/items/9d738687c5cfb453be19

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More

タグ

Flutter (113)初心者向け (28)イベント (18)Google Apps Script (15)Nextjs (12)可茂IT塾 (9)Firebase (7)riverpod (6)React (6)ChatGPT (5)vscode (5)デザイン (5)新卒 (4)就活 (4)Figma (4)Dart (4)JavaScript (4)お知らせ (4)FlutterWeb (3)Prisma (3)NestJS (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)Git (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)Google (1)Web (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)DeepLeaning (1)深層学習 (1)Google Colab (1)コード生成 (1)GitHub Copilot (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)ヒーター (1)作業効率 (1) (1)Flutter実践開発 (1) (1)permission_handler (1)flutter_local_notifications (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)VRChat (1)API (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)FlutterFlow (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More