Tauri で作ったアプリから Google にログインする

2月に記事を書けなかった...。まぁ日数少ないから、3/1なのでセーフということにしたい。

Tauri で Google等のOAuthでログインを行う方法の状況

さて、Tauri で作ったアプリで Google のログインを行う方法があるのだろうかと、色々調べていたのですが、まだ、議論中の話題のようです。

という感じでしたが、1番目はちょっとな...というのと、2番目はもうちょっと具体例がほしいな...と思って、最初にリンクしたスレッドを、不定期に追っていたのですが、3日前にtauri_plugin_oauth を使ったサンプルを作られた方の投稿がありました。

github.com

ありがたすぎる。

というわけで、この実装を参考に試してみましたが、Firebaseの設定等も必要になるので、そちらの情報をまとめながら、どこに何を記載したら良いかを書いていきます。

ただ、この方法、自分だけ使う分には良いですが、セキュリティ的に懸念があるんじゃないかと思われます。配布するような場合には、このまま使うのは避けたほうが良いでしょうね。

Firebaseの準備

Firebaseを使うので、Firewabaseにプロジェクトとアプリが必要です。

プロジェクトを作成します。

この後、Google Analyticsを有効にしますかとか聞かれます。好きにして下さい。

「アプリにFirebaseを追加して利用を開始しましょう」の下の、</> タグマークを選びます。

ウェブアプリにFirebaseを追加するページになります。名前を適当に設定して、Firebase Hosting は使わなくて良いです。

「Firebase SDKの追加」で、npm install firebase の案内と、コードが表示されるので、コピーしておきましょう。コードは以下のような感じです。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "*************************",
  authDomain: "*************************.firebaseapp.com",
  projectId: "*************************",
  storageBucket: "*************************.appspot.com",
  messagingSenderId: "*************************",
  appId: "*************************"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

この情報は、冒頭で紹介した、サンプルプログラムの、app.tsの5行目に入れるものです。

次に、コンソールに戻って、「Authentication」を選びます。

その後、「始める」をクリックすると、下記のページに遷移します。

「Sign-in method」を選んで、Google を選択します。

「有効にする」をクリックして、メールを選んで保存します。

Google Cloud Console での設定

次に、Google Cloud Console に移動します。

左上からプロジェクトが選べるので、未選択状態だったら、先程Firebaseで作ったプロジェクトを選びましょう。

「APIとサービス」の「認証情報」を選びます。上記の手順でやると、OAuth2.0クライアントが2つできあがってるんですが、なんですかね...。片方を選べば良いと思います。

右上の方に、クライアントIDがあるので、それをコピーします。 auth.tsの9行目の<CLIEN_ID_FROM_FIREBASE>を置き換えるものです。

また、「承認済みのリダイレクトURI」に、http://localhost を追加しておきます。

APIキーに制限をつけましょう。何もしないと、下記のようになっています。こちらをクリックして、APIキーを制限します。

Webサイトを選んで、localhost を許可しておきます。

これで、ログインページが表示されるようになります。

なお、これらの設定が有効になるまでしばらくかかるようなので、数分から数十分待ってみましょう。

ただ、このままだと、下記のような感じで、怪しすぎるので、アプリ名を設定しましょう。

「OAuth同意画面」から「アプリを編集」します。

とりあえず、ここの「アプリ名」を変更すれば、同意画面に出てくる名前も変わります。メールアドレスだけ設定する必要がありますが、それ以外は、特に設定しなくても先に進めます。

コードの編集と実行

既に書いたとおりですが、二箇所編集するだけです。

git clone https://github.com/igorjacauna/tauri-firebase-login.git
cd tauri-firebase-login

src/services/firebase/app.ts を編集します。

import { initializeApp } from 'firebase/app';

// Here goes the firebase project config
const firebaseConfig = {
  // Fill here
};

export const firebaseApp = initializeApp(firebaseConfig);

Fill here に、最初の方に取得した、firebaseConfig の内容をコピーします。

次に、src/services/firebase/auth.ts の <CLIENT_ID_FROM_FIREBASE> を置き換えます。

import { open } from '@tauri-apps/api/shell';
import { getAuth, GoogleAuthProvider, getRedirectResult, signInWithRedirect, signInWithCredential } from 'firebase/auth';

const openBrowserToConsent = (port: string) => {
  // Replace CLIEN_ID_FROM_FIREBASE
  // Must allow localhost as redirect_uri for CLIENT_ID on GCP: https://console.cloud.google.com/apis/credentials
  return open('https://accounts.google.com/o/oauth2/auth?' +
    'response_type=token&' +
    'client_id=<CLIEN_ID_FROM_FIREBASE>&' +
    `redirect_uri=http%3A//localhost:${port}&` +
    'scope=email%20profile%20openid&' +
    'prompt=consent'
  );
};

以上で、サンプルプログラムを動かしてみます。

cargo-tauri dev

超シンプルなログインの画面だけが表示されます。

クリックすると、下記のようにGoogleのログインが表示されます。

ログインすると、auth.tsの25行目で、アクセストークンが取得できますので、これをどこかに保存しておけばよいでしょう。

おしまい

以上で、Google にログインして、アクセストークンを取得できるようになりました。ですが、最初に書いたとおりセキュリティ上はあまりよろしくないかと思います。

APIキーの制限がlcalhostなので、誰でもそのキーを使って、APIを叩けます。なので、本来は自分のWebサイト上で、OAuthの処理をすべきでしょう。

一旦テスト開発で...というのには十分役に立つかと思います。

Practice of Programming

プログラムとか Linuxとかの話題