VamShop Блог

 

Новый модуль — Авторизация через социальные сети!

Октябрь 13, 2018

В VamShop по умолчанию добавлен новый модуль — Авторизация через социальные сети!

Для чего нужна авторизация через социальные сети?!

С помощью авторизации через соц. сети очень удобно и быстро можно работать в интернет-магазине как клиент.

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

Давайте покажу на примере как это выглядит в VamShop с новым модулем.

Предположим, Вы оформили заказ в интернет-магазине на базе VamShop и хотите отслеживать движения по Вашему заказу, т.е. на каком этапе находится Ваш заказ, получил магазин оплату за заказ или не получил, отправили Ваш заказа или нет, доставляется он или нет и т.д.

Для этого просто заходите в раздел Мои заказы (рис. 1)

На странице Личный кабинет, внизу, появилась новая ссылка: Вход через: g, т.е. вход через гугл аккаунт.

Нажимайте на ссылку Вход через google (рис. 2).

Вы перейдёте на страницу гугла, где просто кликаете на своём гугл аккаунте и возвращаетесь в магазин (рис. 3).

Всё, Вы авторизовались в магазине VamShop (рис. 4).

Как видите, Вам не нужно запоминать/придумывать/записывать email, пароль от личного кабинета VamShop, всё происходит быстро, просто и автоматически.

После возвращения в магазин снова нажимаете на ссылку Мои заказы и попадаете уже на страницу личного кабинета (рис. 5).

Как видите, Вы уже авторизованы в магазине, Вам не надо проходить регистрацию, либо авторизацию, заполнять форму входа, указывая Ваш пароль, email, всё происходит автоматически.

Всё, теперь на странице Личного кабинета просто нажимаете на ссылку Мои заказы и Вы сразу переходите к списку Ваших заказов (рис. 6).

Вот так легко и просто Вы можете авторизоваться в магазине через социальные сети.

 

Теперь подробная техническая информация по настройке VamShop для авторизации через соц. сети (настройка Google Sign-In for Websites).

Что нужно сделать что б правильно работала авторизация через соц. сети?!

В Админке — Настройки — Магазин появились две новые опции: Google OAuth ID Клиента и Google OAuth Секретный Ключ. Вам нужно заполнить данные опции.

Что б получить необходимые данные, переходите по ссылке https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin и нажимаете кнопку Configure a project — рис. 7.

В окне нажимаете Create a new project — рис. 8

В новом окне — рис. 9

Указываете название проекта, соглашаетесь с правилами гугла, отмечая Yes, нажимаете кнопку Next — рис. 10

Указываете название магазина, которое будет отображаться при переходе на страницу авторизации гугла и нажимаете Next — рис. 11

Ждёте пока настраивается Ваш проект — рис. 12

Затем в появившемся окне — рис. 13

В опции Where are you calling from? выбираете Web browser, в появившейся ниже опции  Authorized Javascript Origin указываете адрес Вашего интернет-магазина и нажимаете Create — рис. 14

После нажатия кнопки гугл создаст для Вас как раз два значения Client ID и Client Secret — рис. 15.

Скопируйте свои значения и укажите их, соответственно, в настройках магазина, в Админке — Настройки — Магазин, в опциях Google OAuth ID Клиента и Google OAuth Секретный Ключ.

Затем перейдите в консоль гугла по адресу https://console.developers.google.com

Сверху у Вас должен быть выбран Ваш проект. в нашем примере VamShop.

Нажимайте слева ссылку Credentials — рис. 16.

Вы перейдёте к настройкам проекта.

По центру, напротив строки OAuth Client нажимаете кнопку Edit

В опции  Authorized redirect URIs указывайте http://адрес-вашего-магазина.ru/site/social_login/google (в нашем примере это будет http://demo2.vamshop.ru/site/social_login/google), подставьте свой адрес вместо demo2.vamshop.ru.

Нажимайте сохранить, кнопка Save — рис. 17

Всё, на этом настройка завершена.

Если Вы всё правильно настроили, в Вашем интернет-магазине на базе VamShop будет работать авторизация через социальные сети.

Если у Вас что-либо не получается, свяжитесь с нами через форму обратной связи https://vamshop.ru/contact_us.html

Leave Your Comment

 
 

Google