Автор оригинала: Andrew Okoye.
ОАУТ – это своего рода технология, которые были около ноября 2006 года, и она использовалась широко во многих приложениях. Существует довольно ряд преимуществ, почему ОАУТ набирает землю как выбор способ авторизации пользователя. Выступая с точки зрения клиента, OAUTH окружает проблему создания паролей при попытке регистрации или вспоминать их при попытке входа в систему. Благодаря OAuth пользователи теперь могут получить доступ к приложению, просто нажатием кнопки, в отличие от заполнения онлайн-форм, которые могут быть непростые.
Я недавно работал над двумя приложениями (мобильным и веб-приложением), который питается Express Server, я написал код с моей командой, и у меня был ломтик опыта с ОАУТ, когда мои заинтересованные стороны требовали, это становится функцией в приложении. Я буду делиться тем, что узнал о реализации ОАУТ в веб-приложении, который был построен с реагированием. Я буду выпустить другую статью для мобильного телефона на основе спроса. Итак, давайте начнем
Реализация бэкэнда
Опыт разработки программного обеспечения научил меня, что вы никогда не должны кодироваться, если вы не поймете, что вы не поймете, что вы пытаетесь достичь. Поверьте мне, это помогло мне в моей профессии. ОАУТ на простых терминах – это просто пользователь, который запрашивает, чтобы быть авторизованным по вызову IDP (провайдер идентичности E.g Google, Facebook и т. Д.). Когда этот вызов сделан, IDP возвращает часть данных (токен или код, который можно использовать для запроса на токен). С помощью этого токена мы можем получить информацию о пользователе, как адрес электронной почты, имя пользователя в зависимости от уровня разрешения, разрешенного пользователем. Бэкверный сервер хранит эти пользовательские данные в базу данных и создает из него токен. Токен, который мы создаем, кодируя информацию о пользователе, возвращенной поставщиком услуг, – это то, что будет использоваться впоследствии в создании авторизованных запросов. Вот простая иллюстрация вышеуказанного процесса Я покажу вам ОАУТ для Google, но концепции одинаковы независимо от поставщика услуг. Прежде чем продолжить, вы должны создать приложение в консоли Google, вы можете прочитать, как это сделать здесь
Прежде чем мы посмотрим в код, приведены ниже шаги в создании OAUTH для любого IDP
- Создайте приложение с IDP, который вы собираетесь использовать и получить учетные данные (Client_id & Client_Secret)
- Исследование, чтобы получить ссылки для вызова модального IDP, а также получение пользовательской информации от нее. Google: Ссылка для призыва модаль –
https://accounts.google.com/o/oauth2/v2/auth?ifyquyquery-params}Ссылка на обмен код для токена –https://oauth2.googleapis.com/tokenСсылка на получение пользовательской информации –https://www.googleapis.com/oauth2/v2/userinfo.
LinkedIn: Ссылка для призыва модаль – https://www.linkedin.com/oauth/v2/authorization?$ keyquery-params} Ссылка на обмен код для токена – https://www.linkedin.com/oauth/v2/accessToken Ссылка на получение информации о пользователе (по электронной почте в одиночку) – https://api.linkedin.com/v2/clientawarememberhandlesks?q=members&projection=(lecrements_(primary ,type ,andle~))
Facebook: Ссылка для призыва модаль – https://www.facebook.com/v8.0/Dialog/oauth?ifyquequery-params} Ссылка на обмен код для токена – https://graph.facebook.com/v8.0/OAUTH/access_Token Ссылка на получение информации о пользователе (по электронной почте в одиночку) – https://graph.facebook.com/v8.0/me?fields=email.
Концепции в основном такие же независимо от IDP, кроме нескольких изменений. Просто пройдите через документацию IDP, которую вы хотите реализовать, и вы будете в порядке. Хорошо, давайте продолжим
КОД
...
/**
* ES-6
* @description - Oauth Google controller - a snippet just to implement the above concept
*
*/
...
const authThroughGoogle = async (req, res) => {
try {
const { code, redirect_uri } = req.query; // code from service provider which is appended to the frontend's URL
const client_id = 'CLIENT_ID_FROM_APP_CREATED';
const client_secret = 'CLIENT_SECRET_FROM_APP_CREATED';
// The client_id and client_secret should always be private, put them in the .env file
const grant_type = 'authorization_code'; // this tells the service provider to return a code which will be used to get a token for making requests to the service provider
const url = 'https://oauth2.googleapis.com/token'; // link to api to exchange code for token.
const { data } = await axios({
url,
method: 'POST',
params: {
client_id,
client_secret,
redirect_uri,
code,
grant_type,
},
});
const tokenFromGoogle = data.access_token;
const urlForGettingUserInfo = 'https://www.googleapis.com/oauth2/v2/userinfo';
const userData = await axios({
urlForGettingUserInfo,
method: 'GET',
headers: {
Authorization: `Bearer ${tokenFromGoogle}`,
},
});
const body = {
username: userData.data.username,
email: userData.data.email,
serviceProvider: 'google',
};
await User.create(body) // store data to database - here you can add your logic for either signing up or signing in a user. I am assuming I have a model called User, I am using Sequelize's create method to insert the user data into this model...
const ourOwnToken = jwt.encode(body) // create token with the body variable above
return res.status(200).json({
success: true,
token: ourOwnToken
});
} catch (err) {
return res.status(500).json({
success: false,
err,
});
}
};
...
NB: Давайте предположим, что маршрут, соответствующий вышеуказанному контроллеру: /auth/google
Реализация Frontend
Для интерфейса у нас будет якорный тег, значение HREF – это местоположение для формы сигнализации поставщика услуг (это называется экраном согласия в Google, и это https://accounts.google.com/o/oaauth2/v2/Auth? {yous-query_params}). Это очень длинная строка, благодаря параметрам запросов. Теперь запросы-параметрам содержит некоторую очень полезную информацию, давайте распустим его;
{
client_id: 'CLIENT_ID_FROM_THE_APP', // It must correspond to what we declared earlier in the backend
scope: "email", // This is the user data you have access to, in our case its just the mail.
redirect_uri: redirectUri, // This is the uri that will be redirected to if the user signs into his google account successfully. Whatever url you specify here must be included as one of the redirect_uris in the Google app you created
auth_type: "rerequest", // This tells the consent screen to reappear if the user initially entered wrong credentials into the google modal
display: "popup", It pops up the consent screen when the anchor tag is clicked
response_type: "code" // This tells Google to append code to the response which will be sent to the backend which exchange the code for a token
}
Ошибка, подверженная пишению такого длинного URL, поэтому я советую использовать пакет NPM, называемой запросами запросов, которая анализирует URL. Вы устанавливаете его как объект JavaScript, а пакет разбирается.
КОД
...
import * as queryString from "query-string";
const queryParams = queryString.stringify({
client_id: 'CLIENT_ID_FROM_THE_APP', // It must correspond to what we declared earlier in the backend
scope: "email", // This is the user data you have access to, in our case its just the mail.
redirect_uri: redirectUri, // This is the uri that will be redirected to if the user signs into his google account successfully
auth_type: "rerequest", // This tells the consent screen to reappear if the user initially entered wrong credentials into the google modal
display: "popup", It pops up the consent screen when the anchor tag is clicked
response_type: "code" // This tells Google to append code to the response which will be sent to the backend which exchange the code for a token
});
const url = `https://accounts.google.com/o/oauth2/v2/auth?${queryParams}`;
...
render () {
...
Continue with Google
}
Когда компонент отображается, и ссылка нажата, вы получаете изображение, которое выглядит так: Когда вы успешно входите в свою учетную запись Google, вы перенаправлены на Redirect_uri, который вы указываете выше, и новый запрос параметра называется код, прилагаемый к URL. Ваш URL-адрес будет выглядеть что-то так: Redirect_uri_specified_in_app? Код = это генерируется и отправляется Google после успешной регистрации в
Redirect Uri На этом этапе мы почти там, ваш Redirect_uri будет в этом формате: {Your-frontend-domain}/один из компонентов-маршрута . Не беспокойся, я объясню. Предполагая, что я хочу сопоставить компонент входа в систему в качестве компонента URI перенаправляет после успешного входа в свою учетную запись Google, это означает, что у меня должна быть какая-то логика в этом компоненте, которая берет код из длинной строки, который мы говорили ранее и отправили на бэкэнда Что, в свою очередь, отправьте токен на интерфейс, что интерфейс может хранить в хранении и использовать для выполнения аутентифицированных запросов.
КОД
// Do the necessary imports
...
class Login extends Component {
socialLogin = async () => {
try {
const { search } = this.props.history.location; // the search variable contains every string after the `?` mark with the `?` inclusive
const codeFromGoogle = search.slice(6) // to get the value of the code query param.
const res = Axios.get('BACKEND_SERVER_BASEURL/auth/google?code=codeFromGoogle&redirect_uri=FRONT_END_BASEURL/auth/google')
if (res.data) {
// request was successful
localStorage.setItem('token', res.data.token) // Store the token from this request in the local storage
this.props.history.push('/dashboard') // Log the user in and redirect to your app dashboard
}
} catch (err) {
console.error(err)
}
}
componentDidMount() {
const {pathname} = this.props.history.location;
if (pathname === '/auth/google' {
// this ensures that the social login method is run only when the path is /auth/google
this.socialLogin()
} else {
// the app continues with its normal logic
}
}
...
Файл маршрута должен быть включен:
...
// Do the necessary imports
const Routes = () => {
return (
);
};
Первый путь к первому маршруту просто /Вход и путь ко второму маршруту это /auth/google И оба указывают на тот же компонент (компонент входа в систему). Если вы посмотрите на компонент входа в систему, мы получили об этом.
Заключение Вот как я интегрировал ОАУТ в мое веб-приложение без использования Passportjs. Я надеюсь, что это будет огромной помощи кому-то там. Пожалуйста, все это, не стесняйтесь оставить свои комментарии и вопросы, и я сделаю все возможное, чтобы ответить на них. Как я уже говорил ранее, я буду выпустить другую статью на ОАУТ с мобильным приложением на основе спроса
Ура и счастливые кодировки !!!