navigation页面的编写:
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="nav">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">珂珂论坛</span>
</button>
<a class="navbar-brand" href="/">珂珂论坛</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" action="/" method="get">
<div class="form-group">
<input type="text" class="form-control" name="search" placeholder="搜索问题">//导航条,每个界面都需要用到
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li th:if="${session.user!=null}"><a href="/publish">发布问题</a></li>
<li><a href="/profile/replies">通知 <span class="badge" th:text=" ${session.unreadCount}"> </span> </a></li>
<li th:if="${session.user==null}"><a href="https://github.com/login/oauth/authorize?client_id=176d5015d09f311f577e&redirect_uri=http://120.24.20.45:80/callback&scope=user&state=1">
登录</a></li>
<li class="dropdown" th:if="${session.user!=null}">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false" >
<span th:text="${session.user.getName()}"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/profile/questions">我的问题</a></li>//调用publish
<li><a href="/logout">退出登录</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
第三方登入主要基于OAuth 2.0。OAuth协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAUTH是安全的。
第三方github实现参考CSDN文章的网址.
大致流程图如下:
代码实现如下:
页面点击a标签跳转到github授权登录页面
<li th:if="${session.user==null}">
<a href="https://github.com/login/oauth/authorize?client_id=176d5015d09f311f577e&redirect_uri=http://120.24.20.45:80/callback&scope=user&state=1">
</a>
</li>
AuthorizeController实现接收github返回的code调用GitHubProvider类的方法来获取用户信息
@Controller
public class AuthorizeController {
@Autowired
GitHubProvider gitHubProvider;
@Value("${github.client.id}")
private String clientid;
@Value("${github.client.secret}")
private String clientsercet;
@Value("${github.redirect.uri}")
private String uri;
@Autowired
private UserService userService;
@GetMapping("/callback")
public String callback(@RequestParam(name="code") String code,
@RequestParam(name="state") String state,
HttpServletRequest request,
HttpServletResponse response){
AccessTokenDTO accessTokenDTO = new AccessTokenDTO();
accessTokenDTO.setClient_id(clientid);
accessTokenDTO.setClient_secret(clientsercet);
accessTokenDTO.setCode(code);
accessTokenDTO.setRedirect_uri(uri);
accessTokenDTO.setState(state);
String accessToken = gitHubProvider.getAccessToken(accessTokenDTO);
GitHubUser gitHubUser = gitHubProvider.getUser(accessToken);
if(gitHubUser!=null){
User user = new User();
String token=UUID.randomUUID().toString();
user.setToken(token);
user.setName(gitHubUser.getName());
user.setAccountId(String.valueOf(gitHubUser.getId()));
user.setAvatarUrl(gitHubUser.getAvatarurl());
userService.createOrUpdate(user);
response.addCookie(new Cookie("token",token));
return "redirect:/";
}
else{
return "redirect:/";
}
}
}
GitHubProvider类的方法实现代码
@Component
public class GitHubProvider {
public String getAccessToken(AccessTokenDTO accessTokenDTO){
MediaType mediaType = MediaType.get("application/json;charset=utf-8");
OkHttpClient client = new OkHttpClient();
RequestBody body = RequestBody.create(mediaType, JSON.toJSONString(accessTokenDTO));
Request request = new Request.Builder().url("https://github.com/login/oauth/access_token")
.post(body).build();
try {
Response response = client.newCall(request).execute();
String string = response.body().string();
String token = string.split("&")[0].split("=")[1];
return token;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
public GitHubUser getUser(String accessToken){
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
.url("https://api.github.com/user")
.header("Authorization","token "+accessToken)
.build();
try {
Response response = client.newCall(request).execute();
String string = response.body().string();
GitHubUser gitHubUser = JSON.parseObject(string, GitHubUser.class);
return gitHubUser;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
GitHubUser类是用来承载用户数据的
(简单介绍一下lombok,lombok会自动生成gettersetter,tostring,constructor。
使用方法:
1.先导入对应的maven
2.打上@Data注解)
import lombok.Data;
@Data
public class GitHubUser {
private String name;
private long id;
private String bio;
private String avatarurl;
}