Scratch Auth for React
はじめに
Scratch AuthはScratch用のシンプルなOAuthサービスです。開発者にはわかりやすいAPIを、エンドユーザーにはスムーズなログイン体験を提供します。scratch-auth-reactを使うことで更に簡単にOAuth機能をサイトに実装することができます。
この記事はNext.jsのApprouter,typescriptを使用して解説がされていますが、PagerouterやReactでもあまり変わらないので自分の環境で動作するようにコードを変更して機能するようにしてください。
インストール
npm install scratch-auth-react
yarn add scratch-auth-react
セットアップ
シークレットキー
Scratch AuthのCookieの署名に使用される秘密鍵を設定します。の値はランダムで長い文字列である必要があります。
SCRATCH_AUTH_COOKIE_SECRET_KEY=あなたの秘密の鍵
設定
redirect_url リダイレクトURL
Webサイトを公開する際に開発環境から本番環境用のURLに変更してください。
title デフォルトではScratch Authですが、オプションであなたのタイトルを決めることができます。
expiration Sessionの保存期間を設定します。デフォルトでは30日です。オプションで保存期間を自由に設定できます。-1の場合は保存期間が永久（200年）に設定されます。
import { ScratchAuth_config } from "scratch-auth-react/src/dist/config"
// セットアップファイル内で必要な設定を行います
const config: ScratchAuth_config = {
redirect_url: `http://localhost:3000/api/auth`, // 必須
title: `タイトル`, // オプション
expiration: 30, // オプション
}
export default config
ページ
Reactなどの基礎知識の補足などはしません。
ホーム
await ScratchAuthGET_session()実行することで、ログインしている場合はユーザー名が返され、それ以外はnullが返されます。
'use client'
import { useAuthSession, ScratchAuth_Login, ScratchAuth_Logout } from 'scratch-auth-react';
export default function Home() {
const session = useAuthSession();
return (
<div className='flex flex-col gap-3 text-center'>
{session?
<>
<h1>{session}</h1>
<button onClick={() => ScratchAuth_Logout()}>
ログアウト
</button>
</>:<>
<button onClick={() => ScratchAuth_Login()}>
ログイン
</button>
</>
}
</div>
);
}
認証
例のコードではNext.jsのuseSearchParamsを使ってパラメーターを取得していますが、privateCodeの値を取得できれば別の方法でも問題ありません。
/*
* page.tsx
* このファイルは、認証ページのコンポーネントです。
* リダイレクトURLからprivateCodeを取得し、認証処理を行います。
*/
'use client'
import React, { useEffect } from 'react';
import { useSearchParams } from 'next/navigation'
import { ScratchAuthSET_session } from 'scratch-auth-react';
export default function AuthPage() {
const searchParams = useSearchParams();
const privateCode = searchParams.get('privateCode');
useEffect(() => {
async function auth() {
await ScratchAuthSET_session(privateCode); //アカウント認証
if (typeof window !== 'undefined') {
window.location.href = `/`; //ホーム移動
}
}
auth()
}, []); //空の依存配列を渡すことで、初回のレンダリング時にのみ実行される
return (
<span>処理中...</span>
);
}
終わり
公式サイトにはわかりやすい解説がなかったので、ぜひこのパッケージを試してみてください！僕が作ったものなので、質問があれば気軽にコメントで聞いてくださいね。お答えします！
Discussion