バックエンドをサーバレスで構成する場合、以下のような実装が必要となります
・SaaSus Platformの認証情報となるトークン(JWT)を、ブラウザのローカルストレージに保管
・SaaS Platform利用者はJWTを使って本人確認を行う
・フロントエンドはReactなどで実装
・バックエンドはLambdaなどのサーバレスサービスを利用し実装
フロー(JWT取得〜テナントオンボーディング)
実装サンプル
1.フロントエンド実装
1.1.実装サンプルの説明
1.1.1.認証後遷移先画面
SaaSusが生成するログイン画面からログインを実施すると、認証後遷移先で設定したURLが呼び出されます。
本実装サンプルを使って動作確認を行うためには、
http://localhost:3000/callback
と設定してください。
認証後遷移先にはクエリパラメータ(code=xxxxx)で、認証情報取得に必要な一時コードが渡される仕様となってます。一時コードを使ってJWTを取得、ローカルストレージに保存する実装を行ってください。
1.1.2.テナントオンボーディング画面
ユーザがログインしていることのチェックをする必要がありますので、以下のように実装してください。
jwttoken
にはローカルストレージに保存したJWTを設定します。
dataが取得出来ることでユーザがログインしていることを確認できます。
ログインが確認できたら、画面自体はセルフサインアップの要否に合わせて実装してください。
セルフサインアップ有効:テナントオンボーディング用の画面を実装
セルフサインアップ無効:ログイン後に表示する画面を実装
- React
try {
const jwtToken = window.localStorage.getItem('SaaSusIdToken');
const apiConfig = new Configuration({
accessToken: jwtToken || 'dummyToken',
basePath: 'https://xxxxx.lambda-url.ap-northeast-1.on.aws',
});
const userInfoApi = new UserInfoApi(apiConfig);
const { data } = await userInfoApi.getLoginUser();
return data;
} catch (e: any) {
return thunkAPI.rejectWithValue(e);
}
1.1.3.ユーザ一覧画面(トップページ)
1.2.実装サンプルの使い方
2.バックエンド実装
2.1.実装サンプルの説明
2.1.1.JWT取得API
- TypeScript
import { AuthClient } from "saasus-sdk";
export const handler = async (event: any): Promise<any> => {
const authClient = new AuthClient();
const code = event.queryStringParameters.code;
const res = await authClient.credentialApi.getAuthCredentials(code);
const token = res.data.id_token;
return {
statusCode: res.status,
body: JSON.stringify({
id_token: await token,
}),
};
};