こんにちは！株式会社レスキューナウのシステム部でフロントエンド、バックエンド、インフラ構築などを担当している吉井です。
今回はGCPのIdentity Platformを利用した簡単なログイン機能作成について
ご紹介させて頂こうかと思います。
Identity Platformについて
まずは、Identity Platformについて説明させて頂きます。
Identity PlatformはGCPが提供してくれているアクセス管理プラットフォームで、
こちらを利用すると簡単に認証サービスを作成することが出来ます。
認証形式はオーソドックスなメールアドレス/パスワード方式、電話(SMS)方式も可能ですし、
SSO（シングルサインオン）でよく知られるSAML認証を使用することも出来ます。
ログイン機能作成
では、
- GCP Identity Platform
- Vite
- Vue
- TypeScript
これらを使用してログイン機能作成をしていきましょう。
GCP Identity Platform 環境構築
まず、Identity Platformの有効化を行います。
プロバイダの設定
【プロバイダを追加】を選択します。
【メール/パスワード】を選択します。
下記画像の設定で【保存】をクリックします。
画面右側の【アプリケーション設定の詳細】をクリックします。
ここに記載してある【apiKey】【authDomain】を控えておきます。
これらは後ほどソースコード上で認証時に使用します。
ユーザーの設定
【ユーザーを追加】を選択します。
使用可能なメールアドレスとIdentity Platformログインに使用するパスワードを設定します。
GCP側の設定は以上になります。
ログイン機能構築
次に、Vite & Vue & TypeScriptでログイン機能を構築します。
環境構築
端末から下記のコマンドを入力し、Viteプロジェクトを作成します。
yarn create vite
その後の設定は以下のようにします。
✔ Project name: … idp_hello_world
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
vue-routerをインストールします。
yarn add vue-router@4
firebase SDKをインストールします。
yarn add firebase
ログイン画面の作成
src/components/Login.vueを作成し、以下のように記入します。
変数configにあるapiKeyとauthDomainは、
先程のIdentity Platformで確認したものを記入します。
<template>
<p style="font-size: 20px">ログイン画面</p>
<div>
<input type="email" v-model="formData.email" />
</div>
<div>
<input type="password" v-model="formData.password" />
</div>
<div>
<button
type="submit"
style="background-color: #99ffff"
@click="execLogin(auth, formData)"
>
ログイン
</button>
</div>
</template>
<script setup lang="ts">
import { initializeApp } from "firebase/app";
import { getAuth, signInWithEmailAndPassword, Auth } from "firebase/auth";
import { reactive } from "vue";
import router from "../router";
const config = {
apiKey: "--Identity Platformで確認した値--",
authDomain: "--Identity Platformで確認した値--",
};
const initApp = initializeApp(config);
const auth = getAuth(initApp);
interface PersonalData {
email: string;
password: string;
}
const formData = reactive<PersonalData>({
email: "",
password: "",
});
async function execLogin(auth: Auth, formData: PersonalData) {
signInWithEmailAndPassword(auth, formData.email, formData.password)
.then(() => {
// 認証成功した時
router.push({ path: "/helloworld" });
})
.catch((error) => {
// 認証失敗した時
console.log("errorCode:", error.code);
console.log("errorMessage:", error.message);
});
}
</script>
承認成功時に表示する画面の作成
src/components/HelloWorld.vueを以下のように書き換えます。
(元のソースコードから今回不要な部分を削っただけです)
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Install
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
in your IDE for a better DX
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
Vue Routerの設定
src配下にrouterディレクトリを作成、そしてそこにindex.tsを作成し、以下のように記入します。
Vue Routerを使用することで、画面遷移の仕組みを簡単に設定することが出来ます。
import {createRouter, createWebHashHistory} from "vue-router";
const routes = [
{
path: "/",
name: "login",
component: () => import("../components/Login.vue"),
},
{
path: "/helloworld",
name: "HelloWorld",
component: () => import("../components/HelloWorld.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
App.vue
src/App.vueを以下のように記入します。
<template>
<router-view />
</template>
main.ts
src/main.tsを以下のように記入します。
import { createApp } from 'vue'
import './style.css'
import router from "./router";
import App from './App.vue'
const app = createApp(App)
app.use(router);
app.mount("#app");
export default app;
最終的なファイル構成は以下のようになります。
./idp_hello_world
├── README.md
├── dist
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ ├── HelloWorld.vue
│ │ └── Login.vue
│ ├── main.ts
│ ├── router
│ │ └── index.ts
│ ├── style.css
│ └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
認証の開始
以下のコマンドでローカルサーバーを立ち上げ、
出力されたURLにブラウザでアクセスします
yarn dev
この場合はhttp://localhost:5173/にアクセスします。
VITE v4.0.2 ready in 392 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
下のような画面が表示されます。
この画面から、Identity Platformで設定したメールアドレスとパスワードを入力し、
ログインボタンをクリックします。
下の画面に遷移すればログイン成功です！
Identity Platformを使用すればこのように基本的な認証機能は簡単に実現することが出来ます。
このような便利なシステムは上手く活用してどんどん開発効率を上げていきたいですね！
Discussion