새 업데이트에 따라 Google로 로그인
6641 단어 reactjavascriptgooglecloud
로그인 양식은 항상 모든 웹 개발자가 수행하는 첫 번째 단계이므로 여기에 Google 서비스를 추가해 보겠습니다.
Google 지원 로그인 양식을 얻기 위해 해야 할 일은 주어진 단계를 따르는 것입니다.
External
를 선택하고 Create
를 클릭합니다. 이것은 당신이 만들고 있는 것에 관한 정보를 요청하는 양식으로 우리를 이끌 것입니다.Save and Continue
를 클릭합니다.스코프 부분을 건너뛸 수 있습니다. 여기서 양식의 부분
Test Users
에 직접 도착합니다. 여기에서 로컬 호스트에서 서비스를 확인하는 데 사용됩니다add Email
.CREATE CREDENTIALS
에 대한 OAuth client ID
여기서 원하는 응용 프로그램 유형을 선택합니다. 여기서는 Web application
를 사용하겠습니다.그런 다음 양식을 작성하고 사용 중인
port number
를 사용했는지 확인하고 CREATE
를 클릭하고 client secret and id
를 저장합니다.npx create-react-app authloginapp
Google Script
.public/index.html
의 헤드 섹션 내부.<script src="https://accounts.google.com/gsi/client" async defer></script>
Make sure to add async and defer as they will manage delay.
src/App.js
에서 화면에 표시할 항목을 변경해 보겠습니다.useEffect
및 useSate
와 같은 반응 후크를 사용하여 간단한 로그인 양식을 생성합니다. App 함수에 다음 코드를 추가합니다. useEffect will Provide us with Jwt-token.
- Add the following hook to enable google in app
useEffect(() => {
/* global google */
google.accounts.id.initialize({
client_id:
'Your-Google-client-Id',
callback: handleCallbackResponse,
});
google.accounts.id.renderButton(document.getElementById('signInDiv'), {
theme: 'outline',
size: 'large',
});
}, []);
Here google.accounts.id is because the script provided.
Google also Provide various different buttons and function.
handleCallbackResponse
을 정의해 보겠습니다.function handleCallbackResponse(response) {
console.log('Encoded JWT ID token: ' + response.credential);
}
npm start
On inspecting in console we will get our
jwt 토큰which is provided by google as verification and also holds user details.
npm install jwt-decode
나중에 handleCallbackResponse 업데이트
var userObject = jwt_decode(response.credential);
console.log(userObject);
We can now see detailed inscription of user.
useState
를 사용하겠습니다. 앱 기능에서 사용할 useState를 추가합니다.const [user, setUser] = useState({});
나중에 handleCallbackResponse를 업데이트하십시오.
setUser(userObject);
<div id="signInDiv"></div>
{user && (
<div>
<img src={user.picture}></img>
<h3>{user.name}</h3>
<h4>{user.email}</h4>
</div>
)}
Now we can see name, image and email on screen after login.
document.getElementById('signInDiv').hidden = false;
src/App.js
은 다음과 같습니다.import React, { useEffect, useState } from 'react';
import jwt_decode from 'jwt-decode';
import './App.css';
function App() {
const [user, setUser] = useState({});
function handleCallbackResponse(response) {
console.log('Encoded JWT ID token: ' + response.credential);
var userObject = jwt_decode(response.credential);
console.log(userObject);
setUser(userObject);
document.getElementById('signInDiv').hidden = true;
}
function handleSignOut(event) {
setUser({});
document.getElementById('signInDiv').hidden = false;
}
useEffect(() => {
/* global google */
google.accounts.id.initialize({
client_id:
'Your-Google-Client-Id',
callback: handleCallbackResponse,
}); google.accounts.id.renderButton(document.getElementById('signInDiv'), {
theme: 'outline',
size: 'large',
});
}, []);
return (
<div className="App">
<div id="signInDiv"></div>
{user && (
<div>
<img src={user.picture}></img>
<h3>{user.name}</h3>
</div>
)}
</div>
);
}
export default App;
이것은 기본 Google 지원 인증 시스템에 모두 필요하며 10분이 소요됩니다.
메모:
redux
대신 useState
를 사용할 수 있습니다. Reference
이 문제에 관하여(새 업데이트에 따라 Google로 로그인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mstomar698/signin-with-google-according-to-new-update-21kb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)