ja.md

Scratch Auth for React

はじめに

Scratch AuthはScratch用のシンプルなOAuthサービスです。開発者にはわかりやすいAPIを、エンドユーザーにはスムーズなログイン体験を提供します。scratch-auth-reactを使うことで更に簡単にOAuth機能をサイトに実装することができます。

このガイドはNext.jsのApprouter,typescriptを使用して解説がされていますが、PagerouterやReactでもあまり変わらないので自分の環境で動作するようにコードを変更して機能するようにしてください。

Note

ラベルにpre、beta、alphaなどが付いているバージョンは安定していない場合があります。問題が発生した場合は、こちらで報告してください。リリースバージョンの使用をお勧めします。

インストール

npm install scratch-auth-react

yarn add scratch-auth-react

セットアップ

シークレットキー

Scratch AuthのCookieの署名に使用される秘密鍵を設定します。の値はランダムで長い文字列である必要があります。

SCRATCH_AUTH_COOKIE_SECRET_KEY=あなたの秘密の鍵

設定

Note

セットアップファイルはプロジェクトのルートディレクトリに作成する必要があります。このファイルはOAuthのリダイレクトURLを設定するために使用されます。下記のように scratch-auth.config.ts という名前で作成してください。

redirect_url リダイレクトURL Webサイトを公開する際に開発環境から本番環境用のURLに変更してください。

title デフォルトではScratch Authですが、オプションであなたのタイトルを決めることができます。

expiration Sessionの保存期間を設定します。デフォルトでは30日です。オプションで保存期間を自由に設定できます。-1の場合は保存期間が永久（200年）に設定されます。

newWindow ログインボタンを押した時にポップアップでログインページを表示するかどうかを設定できます。デフォルトは false です。

import { ScratchAuth_config } from "scratch-auth-react/src/dist/config"

// セットアップファイル内で必要な設定を行います
const config: ScratchAuth_config = {
  redirect_url: `http://localhost:3000/api/auth`, // 必須
  title: `タイトル`, // オプション
  expiration: 30, // オプション
  newWindow: true, // オプション
}

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の値を取得できれば別の方法でも問題ありません。

Note

セットアップで設定したリダイレクトURLのページでこの処理を実行する必要があります。

/*
 * 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>
  );
}