벨로그 로그인 화면이다. 깃허브, 구글, 페이스북 아이디로 로그인 할 수 있게 되있다. 이런걸 OAuth인증이라고 한다.
OAuth인증을 통해서 사용자가 새로 가입을 안해도 된다는 장점과 아이디와 비번을 사이트에서 저장 안해도 된다는 보안상의 이점이 있다. (대부분의 사용자가 사이트마다 아이디와 비번이 유사하다.)
상기한 것과 같은 이점이 있는 소설 로그인을 개발중인 사이트에 적용하고 싶다.
개발환경에서는 URI에 http://localhost:3000 을 입력하면 된다.
만들기를 누르면 Client ID가 발급된다. 밑에 코드에서 client ID를 붙여넣으면 된다.
'react-google-login'이라는 라이브러리를 이용하겠다. 다음과 같이 작성하면 된다.
(물론 당연히 npm install react-google-login 을 통해 라이브러리를 먼저 설치해줘야 한다.)
import React from 'react';
import { GoogleLogin } from 'react-google-login';
function LoginGoogle(props) {
const clientId =
"Your client ID";
async function onSuccess(res) {
const profile = res.getBasicProfile();
const userdata = {
email: profile.getEmail(),
image: profile.getImageUrl(),
name: profile.getName(),
};
// 로그인 성공 후 실행하기 원하는 코드 작성.
}
const onFailure = (res) => {
alert("구글 로그인에 실패하였습니다");
console.log("err", res);
};
return (
<GoogleLogin
className="google-button"
clientId={clientId}
buttonText="Login with Google" // 버튼에 뜨는 텍스트
onSuccess={onSuccess}
onFailure={onFailure}
cookiePolicy={"single_host_origin"}
/>
</div>
);
}
export default withRouter(LoginGoogle);
import React from 'react';
import { GoogleLogin } from 'react-google-login';
function LoginGoogle(props) {
const clientId =
"Your client ID";
const SCOPE = "https://www.googleapis.com/auth/youtube.readonly";
async function onSuccess(res) {
const profile = res.getBasicProfile();
const userdata = {
email: profile.getEmail(),
image: profile.getImageUrl(),
name: profile.getName(),
channelId: channelId,
};
// 로그인 성공 후 실행하기 원하는 코드 작성.
}
const onFailure = (res) => {
alert("구글 로그인에 실패하였습니다");
console.log("err", res);
};
return (
<GoogleLogin
className="google-button"
clientId={clientId}
buttonText="Login with Google" // 버튼에 뜨는 텍스트
onSuccess={onSuccess}
onFailure={onFailure}
cookiePolicy={"single_host_origin"}
scope={SCOPE}
/>
</div>
);
}
export default withRouter(LoginGoogle);
위와 같이 SCOPE에 유튜브 채널에 읽기권한을 추가해주면 된다.
처음에 client ID를 만들면 허용된 사용자만 구글 로그인을 사용할 수 있다. 모든 구글 유저가 로그인 할 수 있게 하려면 프로덕션 단계로 올려야한다.
프로덕션 모드로 승인받기 위해 지켜야 할 것들을 정리해둔다.
본인처럼 구글과 6번씩 메일을 주고 받지 말라고 쓰는 글..ㅋㅋㅋ
URI는 사이트 주소 하나만 쓸 것.
-개발환경인 http://localhost:3000 를 그대로 쓴채로 제출하고 승인거절을 받았다..
앱 로고를 사이트와 일관성있게 첨부할 것.
-아이콘에 사이트 아이콘이 아닌 회사 로고를 첨부했다가 거절받았다.
개인정보처리방침과 서비스 약관을 같은 도메인상에서 접속할 수 있게 할 것.
구글 서치 콘솔에서 도메인 소유권을 확인 할 것.
하라는 대로 열심히 하면 이런 승인메일을 보내준다.
[사용자 인증 정보]-[사용자 인증 정보 만들기]-[OAuth 2.0 클라이언트 ID] 클릭해서 인증 정보를 만들기만 하면 자동으로 승인 요청이 되나요? 게시글을 보기에는 그런 것 같지만 조금 햇깔려서 질문드립니다 ㅠㅠ