next.js 下一篇：使用Laravel REST API和Github Auth进行js登录

bogh5gae 于 12个月前发布在 Git

关注(0)|答案(1)|浏览(145)

我的github auth登录有问题。我使用laravel API作为后端，使用next js作为前端。我想做的是用户可以登录与他们的github帐户。我已经安装了laravel社交软件包用于社交登录。但在前端显示以下错误
error image reference
这是Github控制器代码

class GithubController extends Controller
{
    public function redirect()
    {
        return Socialite::driver('github')->redirect();
    }

    public function callback()
    {
        try {
            $token = auth()->user()->createToken('authToken')->plainTextToken;
            $user = Socialite::driver('github')->userFromToken($token);
            $gitUser = User::updateOrCreate([
                'github_id' => $user->id,
            ], [
                'name' => $user->name,
                'email' => $user->email,
                'auth_type' => 'github',
                'github_token' => $user->token,
                'password' => Hash::make(Str::random(24)),
            ]);

            Auth::login($gitUser);

            $cookie = cookie(name: 'IncomeController', value: $token, minutes: 60 * 24);
            // return the token as a response
            return ResponseHelper::success('Login Successfully', [
                'userId' => auth()->user()->id,
                'userName' => auth()->user()->name,
                'access_token' => $token,
                'token_type' => 'Bearer'
            ])->withCookie($cookie);
        } catch (Exception $e) {
        }
    }
}

这是cors.php [“路径”=>路径“*”]，

'allowed_methods' => ['*'],

'allowed_origins' => [env('FRONTEND_URL'), env('FRONTEND_LOCAL_URL'), '*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => false,`

这是laravel api.php

Route::get('/auth/github', [GithubController::class, 'redirect'])->name('github.login');
Route::get('/auth/github/callback',  [GithubController::class, 'callback']);

这是下一个js登录表单

const handleGithubLogin = async () => {
    try {
      console.log('Github login');
      const response = await fetch('http://localhost:8000/api/auth/github', {
        method: 'GET',
      });

      if (response.ok) {
        const data = await response.json();
        console.log(data);
        // Do something with the token, such as storing it in local storage
      } else {
        // Handle the error response
      }
    } catch (error) {
      // Handle the network error
    }
  };

如果有什么想法，你能帮我吗？抱歉占用你的时间
I tried as like this doc github docs github forum laravel socialite

next.js

来源：https://stackoverflow.com/questions/77028891/next-js-login-with-laravel-rest-api-and-github-auth

1条答案

按热度按时间

j2cgzkjk1#

你可以得到这样的结果，
步骤1：首先获取redirect_uri并将其发送到前端，

public function redirect()
{
    $redirect_uri = Socialite::driver('github')->stateless()->redirect()->getTargetUrl();

    return response()->json($redirect_uri);
}

步骤2：然后从前端重定向响应URL，

const handleLogin = () => {
   axios.get("/api/login/github").then((res) => {
     router.replace(res.data);
   });
};

步骤3：在前端创建一个回调页面，确保在提供者回调中添加此URL。在此页面上，从提供商获取“代码”响应，并通过get请求将其发送到后端回调，然后Socialite将处理其余部分

useEffect(() => {
    const loginWithGithub = async () => {
      await csrf();

      axios
        .get(`/api/login/github/callback?code=${router.query.code}`)
        .then(() => {
          router.push("/dashboard");
        });
    };

    if (router.query.code) {
      loginWithGithub();
    }
  }, [router.query.code]);

步骤4：检索登录用户

public function callback()
    {
        $githubUser = Socialite::driver('github')->stateless()->user();

        // Add your logic to create or log in the user here
        $user = User::updateOrCreate([
            'email' => $githubUser->email,
        ], [
            'name' => $githubUser->name,
            'email' => $githubUser->email,
        ]);

        Auth::login($user);

        // response
        return response()->json($user);
    }

现在您已登录到前端。希望这能解决你的问题。

赞(0）回复(0）举报 12个月前

我来回答

next.js 下一篇：使用Laravel REST API和Github Auth进行js登录

1条答案

相关问题

热门标签

最新问答