使用React oauth库，显示用户授权界面

起初

个人开发笔记?
※由于正在实施中，因此将根据进展进行更新。

使用语言

后端 → PHP/Laravel
前端 → React

我在Laravel中使用Vite引入React。

创建Google OAuth的客户端信息

制作步骤参考以下链接：
https://www.delftstack.com/ja/howto/react/react-use-google-oauth-authentication/

当制作完成后，即可获取客户端ID和客户端密钥。
※即使关闭对话框，仍可随后查看身份验证信息的详细内容。

将从步骤1获取的客户端ID和客户端密钥存储在.env文件中进行管理。

// 省略
GOOGLE_CLIENT_ID=取得したID
GOOGLE_CLIENT_SECRET=取得したシークレット
GOOGLE_REDIRECT=設定時に記載したリダイレクト先

【３】引入react的OAuth库

npm install @react-oauth/google@latest

由于React的版本是v18，所以选择了上述的库。GitHub⇨https://github.com/MomenSherif/react-oauth

【４】屏幕显示实施认可

已将该登录组件添加。

import { GoogleOAuthProvider, useGoogleLogin } from '@react-oauth/google';

function loginUserForm() {

     省略

    return(
        {/* Googleログイン */}
        <div className={ Login.login__google }>
            {/* GoogleOAuthProviderでラップする */}
            <GoogleOAuthProvider clientId={ import.meta.env.VITE_GOOGLE_CLIENT_ID }>
                <ProsessToProvider />
            </GoogleOAuthProvider>
        </div>
    );
};

// Googleログイン処理
export function ProsessToProvider() {
  const login = useGoogleLogin({
    // 認証が成功した際に実行される、コールバック関数　※現時点ではまだ使用していません
    onSuccess: (codeResponse) => console.log(codeResponse),
  });

  return (
    <button onClick={ login }>Google Login</button>
  );
};

// laravelの.envファイルにあるIDを使用するため環境変数の呼び出し
<GoogleOAuthProvider clientId={ import.meta.env.VITE_GOOGLE_CLIENT_ID }>

这次，我们在laravel中引入了Vite来使用react，所以使用import.meta.env进行调用。据说在调用Vite的环境变量时，需要在前面加上VITE_作为规定。

参考网站⇨https://ja.vitejs.dev/guide/env-and-mode.html

为了进行上述调用，我们还要修改laravel的.env文件。

VITE_GOOGLE_CLIENT_ID=XXXXXXXXXXX

确认行动

现在已经开始显示认可界面。
在另一篇文章中，我想要进行认证。