Vue Google 제3자 로그 인 을 위 한 예제 코드
1.개발 자 플랫폼 에 들 어가 면 먼저 Google API 콘 솔 에서 항목 을 선택 하거나 만 듭 니 다.
구 글 개발 자 플랫폼
현란 한 API 더미 가 당신 을 선택 할 수 없 게 하지만,당신 은 이번에 들 어 온 목적 이:사교 API 라 는 것 을 기억 하기 만 하면 됩 니 다.
2.이 API 를 사용 하기 전에 한 가지 더 해 야 할 일이 있 습 니 다.바로 OAuth 2.0 클 라 이언 트 ID 를 신청 하 는 것 입 니 다.
3.요구 에 따라 프로젝트 의 유형,명칭 과 출처 url 을 작성 합 니 다.
주:생 성 이 완료 되면 페이지 에 도 클 라 이언 트 ID 가 키 로 표시 되 는 팝 업 창 이 있 습 니 다.이것 이 생 성 과정 입 니 다.
4.vue-google-signin-button 설치
npm install vue-google-signin-button --save
import GSignInButton from 'vue-google-signin-button'
Vue.use(GSignInButton);
<!-- js-->
<script src="//apis.google.com/js/api:client.js"></script>
<template>
<g-signin-button
:params="googleSignInParams"
@success="onSignInSuccess"
@error="onSignInError">
Sign in with Google
</g-signin-button>
</template>
<script>
export default {
data () {
return {
/**
* The Auth2 parameters, as seen on
* https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams.
* As the very least, a valid client_id must present.
* @type {Object}
*/
googleSignInParams: {
client_id: 'YOUR_APP_CLIENT_ID.apps.googleusercontent.com'
}
}
},
methods: {
onSignInSuccess (googleUser) {
console.log(googleUser)
const profile = googleUser.getBasicProfile()
console.log(profile)
},
onSignInError (error) {
console.log('OH NOES', error)
}
}
}
</script>
<style>
.g-signin-button {
/* This is where you control how the button looks. Be creative! */
display: inline-block;
padding: 4px 8px;
border-radius: 3px;
background-color: #3c82f7;
color: #fff;
box-shadow: 0 3px 0 #0f69ff;
}
</style>
문제 해결 BUG
1.문제 1:js 도입 하지 않 은 초기 화
초기 화 할 때 페이지 에 오류 가 발생 할 수 있 습 니 다.
이 문 제 는 플러그 인 자체 가 Google.js 파일 을 도입 하지 않 았 기 때 문 입 니 다.해결 방법 은 Vue 의 index.html 에 도입 되 는 것 입 니 다.자세 한 내용 은 다음 그림 을 보십시오.
Vue 가 Google 제3자 로그 인 을 실현 하 는 예시 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue Google 제3자 로그 인 내용 은 Google 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보시 기 바 랍 니 다.앞으로 도 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
