Добавьте сторонний логин и SMS-проверку на свой сайт

Node.js Vue.js

OAuth 2.0 в настоящее время является наиболее популярным механизмом авторизации, используемым для авторизации сторонних приложений для получения пользовательских данных. Например, сторонние учетные записи, такие как Nuggets, имеют те же методы входа в систему, что и WeChat, Weibo и github. Подумайте, как разработан и реализован этот метод входа в систему? В повседневной жизни многие приложения или веб-сайты должны отправлять код подтверждения для подтверждения после того, как пользователь вводит номер мобильного телефона.Так как же реализуется весь этот процесс?

掘金登录

1. Идея OAuth

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

Проще говоря, OAuth — это механизм авторизации. Владелец данных сообщает системе, что он согласен разрешать сторонним приложениям входить в систему и получать данные. Таким образом, система генерирует краткосрочный токен входа (токен), который используется вместо пароля для использования сторонними приложениями.

Во-вторых, практика входа в систему OAuth.

Возьмите GitHub в качестве примера реализации авторизованного входа OAuth. Далее я буду практиковать шаг за шагом, как получить доступ к авторизованному входу в систему github на вашем веб-сайте.

1. Регистрация приложения на GitHub

Нажмите кнопку, чтобы перейти на домашнюю страницу github, чтобы создать новое приложение OAuth,Нажмите, чтобы создатьЗаполните информацию следующим образом

После создания запомните Client ID и Client Secret вверху страницы, эти два параметра нужны для дальнейшей разработки.

2. Реализация кода

2.1 Интерфейсная реализация

Внешний интерфейс использует авторизованный метод входа Nuggets.Когда пользователь нажимает сторонний вход GitHub, появляется новое окно.

window.open("/oauth", "", "height=600, width=700")

В этом новом окне вам нужно только перейти по ссылке, client_id, redirect_uri — это параметры, созданные ранее, и настроить их самостоятельно.

window.location.href = 'GitHub.com/логин/OAuth…' После того, как пользователь авторизует вход, он перейдет на страницу перенаправления, перенесет только что сгенерированный код на серверную часть запроса на перенаправление, а серверная часть получит информацию о пользователе, полученную по запросу кода из github, и, наконец, закроет страницу. всплывающее окно.

2.2 Внутренняя реализация

Автор бэкенда использует Koa2, код такой

router.get('/oauth', async function(ctx, next) {
  const requestToken = ctx.request.query.code
  const tokenResponse = await axios({
    method: 'post',
    url: 'https://github.com/login/oauth/access_token?' +
      `client_id=${OAUTH_GITHUB.clientID}&` +
      `client_secret=${OAUTH_GITHUB.clientSecret}&` +
      `code=${requestToken}`,
    headers: {
      accept: 'application/json'
    }
  })
  const accessToken = tokenResponse.data.access_token
  const result = await axios({
    method: 'get',
    url: `https://api.github.com/user`,
    headers: {
      accept: 'application/json',
      Authorization: `token ${accessToken}`
    }
  })

Позже, в соответствии с потребностями вашего бизнеса, полученная информация сохраняется в пользовательской таблице. Здесь есть много способов: я напрямую вставляю авторизованную информацию для входа на github в свою пользовательскую таблицу, или вы можете создать стороннюю таблицу oauth для ее хранения.

const oauthLogin = async (userData = {}) => {
  const username = userData.username
  const nickname = userData.username
  const avatar = userData.avatar
  const date = Date.now()
  const userSql = `select * from users where username = '${username}' `
  const rows = await exec(userSql)
  if (rows.length > 0) {
    return rows[0] || {}
  } else {
    const sql = `insert into users (username,password, nickname, avatar, date) values ('${username}', '${password}', '${nickname}', '${avatar}', '${date}');`
    const insertData = await exec(sql)
  }
}

окончательный эффект

3. Войти с подтверждением по SMS

3.1 Открыть SMS-сервис

Для подтверждения по SMS, естественно, требуется поставщик услуг.Alibaba Cloud имеет бесплатную функцию активации по SMS.Бесплатный SMS-сервис, после открытия он будет рассчитываться по 0,04 юаня за единицу. Чтобы попрактиковаться в зарядке одного юаня для проверки функции проверки SMS, очень хорошо открыть это бесплатно, Вы можете начать тест, не отправляя много денег.

3.2 Внедрение передней работы

Или возьмем случай Денвера, после того, как пользователь нажмет на регистрацию, введите номер телефона, нажмите «Получить код».

3.3 Внутренняя реализация

router.post('/sendSmsCodeToUser', async function (ctx, next) {
  const { username } = ctx.request.body
  CODE = Math.random().toString().slice(-6)
  var client = new RPCClient({
    accessKeyId: 'LTAI4FcGip5kqy1', // 自己申请短信的
    accessKeySecret: 'BvmhpNobez41as1vA5z1QSbhTGIm', 
    endpoint: 'https://dysmsapi.aliyuncs.com',
    apiVersion: '2019-12-14'
  })
  var params = {
    "RegionId": "cn-hangzhou",
    "PhoneNumbers": `${username}`,
    "SignName": "起航网",
    "TemplateCode": "SMS_180059442",
    "TemplateParam": `{code: ${CODE}}`
  }
  var requestOption = {
    method: 'POST'
  }
  var result = await client.request('SendSms', params, requestOption).then((res) => {
      return res
    }, (ex) => {
      return ex
    })
  if ('Code' in result) {
    ctx.body = new SuccessModel({message: '验证码发送成功'})
  } else {
    const limit = result.data.Message.split(':')[1]
    ctx.body = limit >= 10 ? new ErrorModel({message: '同一手机号每天只能发送 10 条验证码'}) : new ErrorModel({message: '同一手机号每小时只能发送 5 条验证码'})
  }
})

Внешние и внутренние запросы для сравнения CODE для реализации функции проверки SMS и входа в систему

Категории