Как использовать вход в локальное хранилище на основе JWT для реагирования на параметры входа в Facebook и Google? - PullRequest
Новая
       48

Как использовать вход в локальное хранилище на основе JWT для реагирования на параметры входа в Facebook и Google?

0 голосов
/ 01 июля 2019

Мое веб-приложение на основе REACT JS на стороне клиента с PHP API на стороне сервера.

Я уже использую JWT на основе токенов SIGN UP для пользователей, для которых токен сохраняется в локальном хранилище , если пользователь входит в систему и проходит аутентификацию.

См. Этот API входа, для которого я звоню Логин : 

const credentials = {
      email: this.state.email,
      password: this.state.password
    }

    axios.post('http://localhost/Auth/api/customers/login.php', credentials, {
    headers: {
        'Accept' : 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
    }})
  .then(response => {
            const  token = response.data.jwt;
            localStorage.setItem("jwttoken", token);
            alert("You are Logged In as Valued Customer");
            this.setState({redirectToReferrer: true});
                   })
      .catch(err => {
      if (err) {
        console.log("Soryy Cannot Login to Customer Account!!!");}
        });

Теперь я использую Facebook и Google Параметры регистрации, подобные этой на странице Registration.js: 

signupS(res, type) {
     let postData;
     if (type === 'facebook' && res.email) {
     postData = {
          FirstName: res.name,
          provider: type,
          email: res.email,
          provider_id: res.id,
          token: res.accessToken,
          provider_pic: res.picture.data.url
     };
    }

    if (type === 'google' && res.w3.U3) {
    postData = {
      FirstName: res.w3.ig,
      provider: type,
      email: res.w3.U3,
      provider_id: res.El,
      token: res.Zi.access_token,
      provider_pic: res.w3.Paa
    };
}

if (postData) {
  console.log(postData);
  axios.post('http://localhost/Auth/api/customers/create_customer.php', postData)
  .then((result) => {
    console.log(result.data);
    alert("Congratulations! Your Customer Account is created");
    this.setState({redirectToReferrer: true});
    return result;
   })
} else {}
}



render () {

      if (this.state.redirectToReferrer) {
        return (<Redirect to={'/loginc'}/>)
      }
      const responseFacebook = (response) => {
        console.log("facebook console");
        console.log(response);
        this.signupS(response, 'facebook');
    }

    const responseGoogle = (response) => {
        console.log("google console");
        console.log(response);
        this.signupS(response, 'google');
    }

return (

<div>
    <FacebookLogin
          appId="my-api" 
          fields="name,email,picture"
          callback={responseFacebook}
        />
   
        <GoogleLogin
          clientId="my-g-api" 
          buttonText="LOGIN WITH GOOGLE"
          onSuccess={responseGoogle}
          onFailure={responseGoogle}
        />
 
    </div>
    ))}

Теперь, когда я запускаю это, я беру только адрес электронной почты и имя из Facebook / Google и отправляю его в тот же API для create_account , который я уже использовал. И потому я отправляю Нет пароля Таким образом, учетная запись не создается.

Теперь, что меня смущает, так это "Должен ли я отправлять этот provider_id и токен вместе с учетными данными Facebook и Google? Или я могу просто отправить пароль (такой же, какой пользователь использовал для Facebook) по всем этим ?

Я хочу сохранить способ входа с токеном JWT, что мне делать с этим токеном Facebook / Google?

...