ionic_auth_social v1.0.10
IonicAuthSocial
Модуль для Ionic Framework, авторизации с помощью социальных сетей.
Реализованы социальные сети:
- ВКонтакте
- Одноклассники
- Яндекс
- Microsoft
Видео демонстрация: https://youtu.be/eb6bEoY0-Jo
Отлажена авторизация на iOS.
Android будет на днях.
Результат работы: token авторизации социальной сети.
Установка
npm i ionic_auth_social --save
ionic cordova plugin add cordova-plugin-app-launcher
ionic cordova plugin add cordova-plugin-advanced-http
ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=authSocial
Использование
В app.module необходимо добавить:
import { IonicAuthSocialModule } from 'ionic_auth_social';
imports: [
IonicAuthSocialModule.forRoot()
]
На странице:
import { IonicAuthSocialService, TypeAuth } from 'ionic_auth_social';
constructor(
private authService: IonicAuthSocialService
) {
this.authService.handleOpenURL();
}
authVK() { // авторизация ВКонтакте
this.authService.auth(TypeAuth.VK, '6954125').subscribe(token => {
console.log('token: ', token);
});
}
authYandex() { // авторизация Яндекс
this.authService.auth(TypeAuth.Yandex, '80db6aa164e34e80a968cb3627f001a0',
'8ed0ec8f92484107bc8cf26435dc2ff6').subscribe(token => {
console.log('token: ', token);
});
}
authOK() { // авторизация Одноклассники
this.authService.auth(TypeAuth.OK, '1278147072').subscribe(token => {
console.log('token: ', token);
});
}
authFB() { // авторизация Facebook
this.authService.auth(TypeAuth.Facebook, '1556984744438759').subscribe(token => {
console.log('token: ', token);
});
}
authGoogle() { // авторизация Google
this.authService.auth(TypeAuth.Google, '991228963133-t1s59c3ue8hpe95h650dain2k2s3usck').subscribe(token => {
console.log('token: ', token);
});
}
authMicrosoft() { // авторизация Microsoft
this.authService.auth(TypeAuth.Microsoft, 'ae0c4798-7245-4325-94e8-c63f6ccee56b').subscribe(token => {
console.log('token: ', token);
});
}
В config.xml в секции добавить, заменив на свои индетификаторы приложений:
<edit-config file="*-Info.plist" mode="merge" target="CFBundleURLTypes">
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>vk</string>
<key>CFBundleURLSchemes</key>
<array>
<string>vk6954125</string>
</array>
</dict>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>yandex</string>
<key>CFBundleURLSchemes</key>
<array>
<string>yx80db6aa164e34e80a968cb3627f001a0</string>
</array>
</dict>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLIconFile</key>
<string />
<key>CFBundleURLName</key>
<string>ok</string>
<key>CFBundleURLSchemes</key>
<array>
<string>ok1278147072</string>
</array>
</dict>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>facebook</string>
<key>CFBundleURLSchemes</key>
<array>
<string>fb1556984744438759</string>
</array>
</dict>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>google</string>
<key>CFBundleURLSchemes</key>
<array>
<string>com.googleusercontent.apps.991228963133-t1s59c3ue8hpe95h650dain2k2s3usck</string>
</array>
</dict>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>Microsoft</string>
<key>CFBundleURLSchemes</key>
<array>
<string>msalae0c4798-7245-4325-94e8-c63f6ccee56b</string>
</array>
</dict>
</array>
</edit-config>
<edit-config file="*-Info.plist" mode="merge" target="LSApplicationQueriesSchemes">
<key>LSApplicationQueriesSchemes</key>
<array>
<string>yandexauth2</string>
<string>vkauthorize</string>
<string>okauth</string>
<string>fbauth2</string>
</array>
</edit-config>
Для тестирования на предустановленных id приложений социальных сетей bundle id должен быть установлен в ru.xsfera.authSocial.
В темплейте можно использовать:
<ion-item (click)="authVK()">
ВКонтакте
</ion-item>
<ion-item (click)="authYandex()">
Яндекс
</ion-item>
<ion-item (click)="authOK()">
Одноклассники
</ion-item>
<ion-item (click)="authFB()">
Facebook
</ion-item>
<ion-item (click)="authGoogle()">
Google
</ion-item>
<ion-item (click)="authMicrosoft()">
Microsoft
</ion-item>
Регистрация приложений в соц. сетях
Для Yandex включите Веб-сервисы и установите CallBack URL yx80db6aa164e34e80a968cb3627f001a0://authorize где 80db6aa164e34e80a968cb3627f001a0 - id вашего приложения
Для Одноклассников сначало создайте приложение. Затем войдя в настройки приложения воспользуйтесь «Подключить OAuth» в поле redirect_uri укажите ok1278147072://authorize где 1278147072 - id вашего приложения (он придет на почту) так же необходимо воспользоваться «Добавить платформу» в «Тип приложения» выбрать iOS разрешить клиентскую OAuth авторизацию в поле redirect_uri укажите ok1278147072://authorize