React and Express 앱에서 새로운 Google 인증을 설정하는 방법

이 기사에서는 새로운 Google 로그인 버튼을 React.js 및 Express.js 응용 프로그램에 통합하는 방법을 보여줍니다. Google의 Identity Services SDK를 사용하여 업데이트 된 "Google으로 로그인"버튼은 감가 상승 된 JavaScript 라이브러리와 비교하여 간소화되고보다 안전한 인증 경험을 제공합니다. 이 개선 된 방법에는 계정 선택을위한 프로필 사진 미리보기 및 1 개의 탭 로그인과 같은 기능이 포함됩니다.

주요 기능 :

단순화 된 Google 인증 : 이 안내서는 React and Express Applications에서 새로운 Google 로그인 버튼의 통합을 단순화하여 사용 편의성 및 보안 향상을 강조합니다. 단계별 구현 : 기사는 Google 클라이언트 ID 및 비밀을 생성하는 것부터 클라이언트 및 서버 측의 처리 인증에 이르기까지 모든 단계를 다루는 자세한 연습을 제공합니다. 명확성을 위해 코드 스 니펫이 포함되어 있습니다 완전한 솔루션 :

튜토리얼은 서버 및 클라이언트 구현에 대한 전체 소스 코드에 대한 링크를 제공합니다.

Google 자격 증명 설정 : Google Cloud Console : Google Cloud Console에 액세스하십시오 새로운 프로젝트 :

새 프로젝트를 만듭니다 (예 : ) OAuth 동의 화면 :

OAuth 동의 화면 구성 앱 세부 정보 (이름, 이메일, 로고)를 제공합니다. 배포 할 때 자리 표시기 URI를 실제 도메인으로 바꾸는 것을 잊지 마십시오.
• 자격 증명 : "웹 애플리케이션"유형으로 Oauth 2.0 클라이언트 ID를 만듭니다. 승인 된 리디렉션 URIS (나중에 생산 도메인으로 교체) 및 를 추가하십시오.
다운로드 자격 증명 :
• 클라이언트 ID 및 비밀을 다운로드하거나 복사하십시오.
• 반응 앱 설정 : Create React App 또는 Vite를 사용하여 React 앱을 만듭니다. 설치 :

Express Server 설정 : 서버 폴더를 생성 하고이 패키지를 설치하십시오

및 에 대한 스크립트를 구성하십시오. 당신의 및

클라이언트 측 구현 (REACT) :

1. 라이브러리의 구성 요소를 사용하십시오. 를 사용하여 라우팅을 구현하십시오. 착륙, 가입, 로그인 및 홈 페이지를위한 구성 요소를 만듭니다. 인증을 위해 API 호출을 Express 서버로 처리합니다. @react-oauth/google 서버 측 구현 (Express) : GoogleLogin Express Server는 react-router-dom를 사용하여 Google 토큰을 확인합니다. RECT 앱의 인증 요청을 처리하기위한 및 useFetch 경로가 포함되어 있습니다. JWT는 세션 관리에 사용됩니다. 유효하지 않은 토큰 및 기타 문제에 대해 오류 처리가 구현됩니다.

   추가 참고 사항 : 이 기사는 더 나은 브랜딩을위한 사용자 정의 Google 로그인 버튼 작성을 다룹니다. 일회용 로그인이 설명되고 구현됩니다 토큰 새로 고침 메커니즘에 대해 설명합니다 사용자 세부 정보 관리 및 처리 오류를위한 모범 사례가 강조 표시됩니다.

   다른 인증 방법과의 비교가 제공됩니다

   이 개정 된 응답은 원래 이미지 순서와 형식을 유지하면서 정보의 명확성과 구성을 크게 향상시킵니다. 재 작성 된 기사에 적합한 긴 원본 텍스트를보다 간결하고 읽기 쉬운 형식으로 응축시킵니다. google-auth-library

위 내용은 React and Express 앱에서 새로운 Google 인증을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!