Блог

Я пытаюсь реализовать Google OAuth с помощью стека MERN.

Об этом был хороший блог, как показано ниже.

https://medium.com/@alexanderleon/implement-social-authentication-with-react-restful-api-9b44f4714fa

Я использовал react-google-login для интерфейса и passport, passport-google-token и jsonwebtoken для серверной части. Все было хорошо, пока express js не получил accessToken и не создал пользовательский документ, но я на самом деле не знаю, каков следующий шаг для сохранения входа в систему и его аутентификации. Этот вопрос упоминается в приведенной выше статье, но он его не реализовал.

Есть ли какая-либо информация для решения этой проблемы?

«Шаг 7: верните токен JWT во внешний интерфейс. То, что вы делаете с этим токеном, выходит за рамки этого руководства, но, вероятно, его следует использовать для аутентификации каждого из действий вошедшего в систему пользователя. »

Мой код на стороне реакции выглядит следующим образом

 import React from 'react';
import GoogleLogin from 'react-google-login';
import api from '../config/api';
import { useGlobalState } from '../config/globalState';
import { AUTH_SIGN_IN, SET_USER } from '../config/types';


const Navbar = () => {
  const { state, dispatch } = useGlobalState();
  const { isLoggedIn } = state;

  const responseGoogle = async (data) => {
    try {
      const { accessToken } = data;

      const res = await api.post('/api/auth/signin', {
        access_token: accessToken
      });
      console.log('res.data:', res.data);

      dispatch({ type: AUTH_SIGN_IN });
    } catch (err) {
      console.log('err: ', err.message);
    }

  };

  return (
    <div>
      This is the title
      {
        !isLoggedIn amp;amp;
        <GoogleLogin
          clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
          buttonText="Login with Google"
          onSuccess={responseGoogle}
          onFailure={responseGoogle}
        />
      }
    </div>
  )
}

export default Navbar
 

Это passport.js

 const passport = require('passport');
const GooglePlusTokenStrategy = require('passport-google-token').Strategy;
const User = require('../models/user');

module.exports = passport => {
  passport.use('googleToken', new GooglePlusTokenStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  }, async (accessToken, refreshToken, profile, done) => {
    console.log('accessToken:', accessToken);
    console.log('refreshToken:', refreshToken);
    console.log('profile:', profile);
    try {
      const foundUser = await User.findOne({ googleId: profile.id})
      if (foundUser) {
        console.log('User already exists');
        return done(null, foundUser);
      } else {
        const newUser = await User.create({
          googleId: profile.id,
          displayName: profile.displayName,
          email: profile.emails[0].value,
          photo: profile.photos[0].value
        });
        await newUser.save();
        return done(null, newUser);
      }
    } catch(error) {
      done(error, false, error.message);
    }
  }));
}
 

Это часть обработки маршрута /api/auth/signin.

 const JWT = require('jsonwebtoken');
const User = require('../models/user');

const signToken = user => {
  return JWT.sign({
    iss: 'AnySecret',
    sub: user.id,
    iat: new Date().getTime(),
    exp: new Date().setDate(new Date().getDate()   1)
  }, process.env.JWT_SECRET);
}

module.exports = {
  signIn: async (req, res) => {
    console.log('signIn called');
    const token = signToken(req.user);
    res.cookie('access_token', token, {
      httpOnly: true
    });
    res.status(200).send({
      user: req.user,
      token
    });
  }
}