🐆

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

2024/04/21に公開

Flutter

はじめに

上記を参考に実装できた。
Flutter webででGoogle認証しようとしたところ途中でエラーが出て詰まったので備忘録。

詰まったところ

index.htmlにclient_idを入れるところまで実装し、flutterをビルドしてsignInボタンを押すと以下のエラーが出た。

index.html

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

ボタンを押した時コンソールに出たエラー

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, null)

解決方法

以下の記事が参考になった。

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

一度も違うポートで使った記憶は自分にはないが・・
上記の記事を参考にして、新しいクライアントIDを作成。

アプリケーションの種類：ウェブアプリケーション > 名前：Web Client(適当)
承認済みの JavaScript 生成元：http://localhost:5555
保存ボタンを押す。

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

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

flutter run --web-port 5555

上記で設定したlocalhostの番号からではないときに、一度も認証したこと無いClientIDを使ってSignInボタンを押すと、セキュリティー的に危ないとGoogleが察知してClientIDが使えなくなるのか？と思いました。

もし承認済みの JavaScript 生成元に入れてないアドレスから間違えてアクセスしてしまったのであれば、また新しいクライアントIDを作成してやり直せば良いです。

無事にGoogle認証ができるようになりました。
また、自身のprojectではPeople APIを有効にしなくても登録ができた。

おまけ(^_^;)

上記でGoogle認証ができるようになったが、SingInボタンを押すと以下のコードがでてきます。

You have created a new client application that uses libraries for user
authentication or authorization that are deprecated. New clients must use the
new libraries instead. See the [Migration
Guide](https://developers.google.com/identity/gsi/web/guides/gis-migration) for
more information.

新しいクライアント・アプリケーションを作成しました。
を使用する新しいクライアント・アプリケーションを作成しました。新しいクライアントは
を使用する必要があります。移行ガイド
ガイド](https://developers.google.com/identity/gsi/web/guides/gis-migration) を参照してください。
を参照してください。

2024 年第 1 四半期に、Chrome のサードパーティ Cookie のサポート終了が開始されます。移行ガイドに沿って変更の可能性を確認し、ウェブサイトへのログインで悪影響が生じないようにしてください。

この認証のやり方は移行を勧められてるらしい・・・

はじめに

詰まったところ

解決方法

おまけ(^_^;)

Discussion