当前位置：首页 > news >正文

汕头网站建设sthkehtml网站模版

news 2025/9/17 7:37:08

汕头网站建设sthke,html网站模版,香奈儿网站建设的目标,国家最新新闻文章目录前言前期准备配置客户端 ID 和重定向 URL配置 OAuth 权限请求页面登录流程前端演示代码后端演示代码总结个人简介前言 Google OAuth 2.0 是其中一种常见的第三方登录方式，广泛应用于各类网站和应用程序。通过 Google OAuth 2.0，用户可以使用…

在这里插入图片描述

文章目录

前言
前期准备
- 配置客户端 ID 和重定向 URL
- 配置 OAuth 权限请求页面
登录流程
- 前端演示代码
- 后端演示代码
总结
个人简介

前言

Google OAuth 2.0 是其中一种常见的第三方登录方式，广泛应用于各类网站和应用程序。通过 Google OAuth 2.0，用户可以使用其 Google 账户轻松登录第三方网站，而不必创建额外的账户。本文将介绍如何集成 Google OAuth 2.0 服务，实现用户在第三方网站上的登录。

前期准备

配置客户端 ID 和重定向 URL

访问 Google API Console 获取 OAuth 2.0 凭据。点击左侧边栏的“Credentials”选项，然后创建一个客户端 ID（OAuth client ID）。

选择你的应用类型，可以选择 Web 站点、Android、或者 IOS 应用等，这取决于你的业务。接着在 “Authorized JavaScript origins” 这一栏目，填写你的网站域名即可，如果是本地调试的话，通常设置为http://localhost，如果有端口，加一个端口名，如 http://localhost:8000，这里的目的是让谷歌知道你网站托管的 HTTP 来源。然后在“Authorized redirect URIs”这一栏目，填写你的重定向地址，一般是你的后端登录路径。

上文相关的选项都配置好以后，点击“CREATE”按钮来保存并生成客户端 ID（Client ID）和客户端密钥（Client secret）。

配置 OAuth 权限请求页面

点击左侧列表的“OAuth consent srceen” 选项，创建一个应用。

填写应用的基本信息，比如名字、邮箱、域名等。这个页面的信息，会显示在弹出的确认授权登录框中，可帮助最终用户了解你是谁并与你联系。

配置可访问的权限，将权限勾选后保存即可。

添加测试账户，也就是在未正式上线之前，可以进行 OAuth 2.0 登录的邮箱账。

登录流程

前端演示代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Google Login</title><script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<h2>Google 登录示例</h2>
<button id="googleSignInButton">使用 Google 登录</button><script>document.getElementById('googleSignInButton').onclick = function () {// Google OAuth 2.0 URLconst clientId = '994578547547-gc6XXXX0vp9hl.apps.googleusercontent.com';  // 替换为你的Google客户端IDconst redirectUri = 'http://localhost:8000/api/google/login';  // 替换为后端的回调登录URIconst scope = 'email profile';const responseType = 'code';const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=${responseType}&scope=${scope}`;// 重定向到 Google OAuth 2.0 授权页面window.location.href = googleAuthUrl;};
</script>
</body>
</html>

后端演示代码

Maven 依赖

        <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-oauth2-client</artifactId></dependency>

google:token-apply-url: https://oauth2.googleapis.com/tokenuserinfo-url: https://www.googleapis.com/oauth2/v3/userinfooauth2:client-id: 994578547547-gc6uXXXXjtpk0vp9hl.apps.googleusercontent.comclient-secret: GOCSPX-nWFVXXXXFImvw3iHLNkR@Api(tags = "谷歌服务相关请求")
@RestController
@RequestMapping("/api/google")
@RequiredArgsConstructor
public class GoogleController {@Value("${google.oauth2.client-id}")private String clientId;@Value("${google.oauth2.client-secret}")private String clientSecret;@Value("${google.token-apply-url}")private String tokenEndpoint;@Value("${google.userinfo-url}")private String userInfoEndpoint;private final RestTemplate restTemplate;private final TokenProvider tokenProvider;private final UserDetailsService userDetailsService;private final UserService userService;private final SecurityProperties properties;private final OnlineUserService onlineUserService;@AnonymousGetMapping("/login")public ResponseEntity<Object> handleGoogleLogin(@RequestParam("code") String authorizationCode, HttpServletRequest req) {// Step 1: 用授权码获取 Access TokenMultiValueMap<String, String> params = new LinkedMultiValueMap<>();params.add("client_id", clientId);params.add("client_secret", clientSecret);params.add("code", authorizationCode);params.add("redirect_uri", "http://localhost:8000/api/google/login");params.add("grant_type", "authorization_code");HttpHeaders headers = new HttpHeaders();headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(params, headers);ResponseEntity<Map> response = restTemplate.postForEntity(tokenEndpoint, request, Map.class);String accessToken = (String) response.getBody().get("access_token");// Step 2: 用 Access Token 获取用户信息HttpHeaders userInfoHeaders = new HttpHeaders();userInfoHeaders.setBearerAuth(accessToken);HttpEntity<String> userInfoRequest = new HttpEntity<>(userInfoHeaders);ResponseEntity<Map> userInfoResponse = restTemplate.exchange(userInfoEndpoint, HttpMethod.GET, userInfoRequest, Map.class);Map<String, Object> userInfo = userInfoResponse.getBody();String googleId = (String) userInfo.get("sub");String email = (String) userInfo.get("email");String name = (String) userInfo.get("name");String picture = (String) userInfo.get("picture");// 用户登录逻辑、并返回用户信息、会话信息}
}