Блог

Некоторое время назад я попробовал что-то новое в программировании, поэтому начал изучать NativeScript и Angular. В этом случае я создаю мобильное приложение на основе кросс-платформы, которое помогает людям спасать свои жизни, и в этом случае я хочу встроить в свое мобильное приложение вход через OAuth 2.0 с помощью поставщика учетных записей Google, но я не знаю, как предоставить доступ к некоторым функциям в моем приложении только авторизованным пользователям. Я создал OAuth-логин с провайдером Google, и он работает нормально. Но когда пользователь вошел в систему, авторизация меняет статус флага «isAuthorized» на true. Если я попытаюсь использовать этот флаг в других компонентах, я получу много ошибок, связанных с флагом «isAuthorized». Я перепробовал много идей, и теперь я не знаю, как передать их другим компонентам, или, может быть, это лучшее решение для этого случая?

Вот код компонента .html, который содержит кнопку входа в систему (это отлично работает)

 lt;StackLayout row="0" class="nt-drawer__header"gt;  lt;Image class="nt-drawer__header-image fas t-36" src="font://amp;#xf2bd;"gt;lt;/Imagegt;  lt;Button class="google-signin" style="background-color: #30BCFF; color: #FFF; border-radius: 5; font-size: 20;"   *ngIf="isAuthenticated == false"   text="Zaloguj się z Google"   (tap)="onLogin()"gt;lt;/Buttongt;  lt;Button class="google-signout" style="background-color: #30BCFF; color: #FFF; border-radius: 5; font-size: 20;"  *ngIf="isAuthenticated == true"  text="Wyloguj"  (tap)="onLogout()"gt;lt;/Buttongt;  lt;Label class="nt-drawer__header-footnote"   *ngIf="isAuthenticated == true"   text="{{ userEmail }}"gt;lt;/Labelgt; lt;/StackLayoutgt;  

Вот функция, которая содержит функцию входа в систему и описанный флаг для входа в систему (также отлично работает)

 import { IAuthenticated } from './interfaces/IAuthenticated'  @Component({  selector: 'ns-app',  templateUrl: 'app.component.html', }) export class AppComponent implements OnInit, IAuthenticated {   isAuthenticated: Boolean = false   onLogin() {  this.authService.tnsOauthLogin('google').then((_result: ITnsOAuthTokenResult) =gt; {  this.isAuthenticated = true;  this.router.navigate(['/home']);  })  .catch((e) =gt; console.log(e))  };   onLogout() {  this.authService.tnsOauthLogout();  this.isAuthenticated = false;  this.router.navigate(['/home']);  } }  export function isLogged(): Boolean {  return this.isAuthenticated ? true : false }  

Вот функция и условие html для компонента, который не работает

 lt;StackLayoutgt;  lt;Button *ngIf="checkUserAuth() == true" text="Dodaj wpis"gt;lt;/Buttongt; lt;/StackLayoutgt;  import { isLogged } from '../app.component'  export class KnowledgeBaseComponent implements OnInit {   ngOnInit(): void {  isLogged()  }   checkUserAuth(): Boolean {  return isLogged() ? true : false  } }  

Также, может быть, кто-то знает эту ошибку, касающуюся областей api Google?

«Вы получаете эту ошибку либо потому, что ваше введенное имя области OAuth2 неверно, либо оно относится к более новой области, которая находится за пределами домена этого устаревшего API».

Вот конфигурация

 export function configureOAuthProviderGoogle(): TnsOaProvider {  const googleProviderOptions: TnsOaProviderOptionsGoogle = {  openIdSupport: 'oid-full',  clientId: ''  redirectUri: ''  urlScheme: ''  scopes: ["openid", "email"]  };   const googleProvider = new TnsOaProviderGoogle(googleProviderOptions);   return googleProvider; }  

Спасибо за помощь и извините за такие длинные вопросы

Чтобы решить эту проблему, я использовал плагин SecureStorage для NativeScript, чтобы создать что-то вроде сеанса входа в систему. Затем я создал объект SecureStorage, который хранит данные в потоке ключ-значение. Таким образом, при каждом новом входе в систему приложение использует объект SecureStorage для создания авторизованных данных ключ-значение и сохранения их в объекте. Это используется для проверки указанного компонента, если пользователь вошел в систему и использовал указанную функциональность. После выполнения функции выхода из системы объект удаляется в случае, если какие-либо функции могут быть скрыты.

Чтобы войти в систему, я использую этот код в своем auth-сервисе.ts

 tnsOauthLogin(providerType){  this.client = new TnsOAuthClient(providerType)   return new Promiselt;ITnsOAuthTokenResultgt;((resolve, reject) =gt; {  this.client.loginWithCompletion((tokenResult: ITnsOAuthTokenResult, error) =gt; {  if(error){  console.log(error)  reject(error)  } else {  this.secureStorage.set({  key: '',  value: ''  }).then(success =gt; console.log(success));  resolve(tokenResult);  }  });  }); }  tnsOauthLogout() {  if (this.client) {  this.client.logout()  this.secureStorage.remove({  key: ''  }).then(success =gt; console.log(success));  } }  

Функция, которая проверяет, вошел ли пользователь в компоненты

 isLogged() {  if (this.secureStorage.getSync({ key: '' })) {  this.isAuthenticated = true;  } else {  this.isAuthenticated = false;  } }