web网站集成Google登录接口之前端要做什么(nuxt.js的做法)

在自己的网站集成google登录的方法(nuxt.js): 

官方文档:https://developers.google.com/identity/sign-in/web/sign-in

1.根据官方文档的步骤先为自己的网站创建谷歌API控制台和客户端ID。如图:

                          配置项目时,选择Web浏览器客户端类型并指定应用程序的原始URI。

                          配置完成后,请记下已创建的客户端ID。

web网站集成Google登录接口之前端要做什么(nuxt.js的做法)_第1张图片

2.在nuxt的nuxt.config.js下配置引用谷歌提供的script:

web网站集成Google登录接口之前端要做什么(nuxt.js的做法)_第2张图片

3.在vue的template中为你的登录按钮添加@click事件,例如:

methods里面:

			//谷歌登录
			gLogin(){
				let $this = this;
				gapi.load('auth2', function(){
				let auth2 = gapi.auth2.init({
					client_id: '你创建的客户端ID.apps.googleusercontent.com',
					cookiepolicy: 'single_host_origin',
				});
				
				//登录成功的回调函数
				auth2.signIn().then(function() {
					let token = auth2.currentUser.get().getAuthResponse().id_token;
					let userId = auth2.currentUser.get().getBasicProfile().getId();
					
					//把token通过post方法传递给后端验证即可
						
				});
				
				});
			}

 

你可能感兴趣的:(前端,Vue,nuxt.js)