Верно, так просто использовать трехсторонний Github для авторизованного входа! (боевой OAuth2.0)

Java программист
Верно, так просто использовать трехсторонний Github для авторизованного входа! (боевой OAuth2.0)

Эта статья размещена в личном блоге:www.chengxy-nds.top, совместное использование технических ресурсов.

Предыдущий«Четыре метода авторизации OAuth2.0»В конце статьи я сказал, что будет последующая волнаOAuth2.0В реальном бою, после нескольких дней задержки, сегодня я, наконец, наверстал упущенное.

Недавно я работаю над своим собственным проектом с открытым исходным кодом (fire),Springboot + vueФреймворк разделения front-end и back-end только что построили, и я только начал делать функцию входа в систему.Я чувствовал, что обычный вход в учетную запись с паролем был слишком простым и бессмысленным.Поразмыслив над этим, я решил добавить это кGitHubуполномоченный и人脸识别и другие способы входа.

在这里插入图片描述
вставьте сюда описание изображения

а такжеGitHubАвторизованный вход просто работаетOAuth2.0Самый сложный режим кода авторизации вOAuth2.0процесс авторизации и последующие функции проекта будут постоянно обновляться.

1. Процесс авторизации

в конкретныхGitHubПрежде чем авторизовать вход, давайте кратко рассмотримOAuth2.0Процесс авторизации для режима кода авторизации, еслиfireсайт позволяетGitHubВход в учетную запись, процесс примерно следующий.

在这里插入图片描述
вставьте сюда описание изображения

пользователи хотят использоватьGitHubаккаунт для входаfireВеб-сайт:

  • fireПозвольте пользователю перейти на сайт первымGitHubДля авторизации появится окно авторизации.
  • После того, как пользователь соглашается,GitHubбудет основываться наredirect_uriперенаправить обратноfireсайт и возвращает код кода авторизации.
  • fireСайт использует код авторизации и клиентский ключclient_secret, запросить токен с GitHubtoken, проход проверки возвращает токен.
  • В конце концовfireвеб-сайт дляGitHubЗапрашивать данные каждый раз, когда GitHubAPIВсе должны принести жетон.

2. Регистрация личности

После того, как мы разобрались с логикой авторизации, у нас осталась подготовительная работа.

получить веб-сайтOAuthДля авторизации необходимо зайти на его сайт для регистрации личности и получить идентификационный код приложенияClientIDа такжеClientSecret.

регистрпортал https://github.com/settings/applications/1334665, есть несколько обязательных полей.

  • Application name: название нашего приложения;
  • Homepage URL: ссылка на домашнюю страницу приложения;
  • Authorization callback URL:ЭтоgithubОбратный звонок на адрес нашего проекта для получения кода авторизации и токена.在这里插入图片描述

После отправки вы увидите, что можете видеть клиентаClientIDи клиентский ключClientSecret, на этом наши приготовления закончились.

在这里插入图片描述
вставьте сюда описание изображения

3. Авторизованная разработка

1. Получите код авторизации

Чтобы лучше увидеть эффект, я поступил с кодом авторизации грубо, прямо вJSСсылка для авторизации собрана здесь, но при разработке реальной работы необходимо учитывать вопросы безопасности.

https://github.com/login/oauth/authorize?
client_id=ad41c05c211421c659db&
redirect_uri=http://47.93.6.5:8080/authorize/redirect

внешний интерфейсvueЛогика тоже очень простая, нужно толькоwindow.location.hrefНемного перенаправить.

<script>
export default {
  methods: {
    loginByGithub: function () {
      window.location.href = 'https://github.com/login/oauth/authorize?client_id=ad41c05c211421c659db&redirect_uri=http://47.93.6.5:8080/authorize/redirect'
    }
  }
}
</script>

После запроса вам будет предложено авторизовать нас.После согласия на авторизацию вы будете перенаправлены наauthorize/redirect, и нести код авторизацииcode; Если это было согласовано ранее, он пропустит этот шаг и перезвонит напрямую.

在这里插入图片描述
вставьте сюда описание изображения

2. Получите токен

Обратный звонок сразу после авторизацииfireИнтерфейс сайта, собрать токен после получения кода авторизацииaccess_tokenзапросить ссылку, в это время будет использоваться клиентский ключclient_secret.

https://github.com/login/oauth/access_token? 
    client_id=${clientID}& 
    client_secret=${clientSecret}& 
    code=${requestToken}

access_tokenОн будет возвращен как ответ на запрос, а результатом будет строка символов, которую нам нужно перехватить.

access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c&scope=&token_type=bearer

Получив токен, начните получать информацию о пользователе, вAPIпринестиaccess_token.

https://api.github.com/user?access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c

Возвращаемая информация о пользователеJSONФормат данных, если вы хотите передать данные во внешний интерфейс, вы можете передатьurlПеренаправление на главную страницу и передача данных в качестве параметров.

{
    "login": "chengxy-nds",
    "id": 12745094,
    "node_id": "",
    "avatar_url": "https://avatars3.githubusercontent.com/u/12745094?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/chengxy-nds",
    "html_url": "https://github.com/chengxy-nds",
    "followers_url": "https://api.github.com/users/chengxy-nds/followers",
    "following_url": "https://api.github.com/users/chengxy-nds/following{/other_user}",
    "gists_url": "https://api.github.com/users/chengxy-nds/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/chengxy-nds/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/chengxy-nds/subscriptions",
    "organizations_url": "https://api.github.com/users/chengxy-nds/orgs",
    "repos_url": "https://api.github.com/users/chengxy-nds/repos",
    "events_url": "https://api.github.com/users/chengxy-nds/events{/privacy}",
    "received_events_url": "https://api.github.com/users/chengxy-nds/received_events",
    "type": "",
    "site_admin": false,
    "name": "程序员内点事",
    "company": null,
    "blog": "",
    "location": null,
    "email": "",
    "hireable": null,
    "bio": null,
    "twitter_username": null,
    "public_repos": 7,
    "public_gists": 0,
    "followers": 14,
    "following": 0,
    "created_at": "2015-06-04T09:22:44Z",
    "updated_at": "2020-07-13T06:08:57Z"
}

нижеGitHubперезвони намfireЧасть кода внутреннего процесса обработки веб-сайта относительно грубая, поэтому давайте продолжим его оптимизировать в будущем!

/**
     * @param code
     * @author xiaofu
     * @description 授权回调
     * @date 2020/7/10 15:42
     */
   @RequestMapping("/authorize/redirect")
    public ModelAndView authorize(@NotEmpty String code) {

        log.info("授权码code: {}", code);

        /**
         * 重新到前端主页
         */
        String redirectHome = "http://47.93.6.5/home";

        try {
            /**
             * 1、拼装获取accessToken url
             */
            String accessTokenUrl = gitHubProperties.getAccesstokenUrl()
                    .replace("clientId", gitHubProperties.getClientId())
                    .replace("clientSecret", gitHubProperties.getClientSecret())
                    .replace("authorize_code", code);

            /**
             * 返回结果中直接返回token
             */
            String result = OkHttpClientUtil.sendByGetUrl(accessTokenUrl);
            log.info(" 请求 token 结果：{}", result);

            String accessToken = null;
            Pattern p = Pattern.compile("=(\\w+)&");
            Matcher m = p.matcher(result);
            while (m.find()) {
                accessToken = m.group(1);
                log.info("令牌token：{}", m.group(1));
                break;
            }

            /**
             * 成功获取token后，开始请求用户信息
             */
            String userInfoUrl = gitHubProperties.getUserUrl().replace("accessToken", accessToken);

            String userResult = OkHttpClientUtil.sendByGetUrl(userInfoUrl);

            log.info("用户信息：{}", userResult);

            UserInfo userInfo = JSON.parseObject(userResult, UserInfo.class);

            redirectHome += "?name=" + userInfo.getName();

        } catch (Exception e) {
            log.error("授权回调异常={}", e);
        }
        return new ModelAndView(new RedirectView(redirectHome));
    }

Наконец, давайте взглянем на общий процесс авторизации, потому чтоGitHubСкорость доступа относительно низкая, и иногда может возникать тайм-аут запроса.

在这里插入图片描述
вставьте сюда описание изображения

Адрес онлайн-просмотра:http://47.93.6.5/login, добро пожаловать в опыт ~

Адрес проекта на GitHub:https://github.com/chengxy-nds/fire.git

Суммировать

от всегоGitHubС точки зрения процесса авторизованного входа,OAuth2.0Режим кода авторизации относительно прост, я так понимаюGitHubВход в систему, как WeChat, bib и другие трехсторонние входы, также будет возможен, это абсолютно одно и то же, заинтересованные студенты могут попробовать.

Оригинальность не так проста, сжигание волос на выходе, если есть потеря, пожалуйста, дайте лайк, чтобы поощрить это!

Разобраны и розданы друзьям сотни различных технических электронных книг. Подпишитесь на официальный аккаунт, чтобы ответить [666], чтобы получить его самостоятельно. Мы создали группу технического обмена с некоторыми друзьями, чтобы обсуждать технологии и делиться технической информацией, стремясь учиться и развиваться вместе.Если вам интересно, отсканируйте код, чтобы присоединиться к нам!

Категории