Как подключить SAML auth в NativeScript + Angular?

Для подключения SAML аутентификации в проект NativeScript + Angular, вам потребуется несколько шагов. Ниже приведены подробные инструкции:

1. Установите зависимости:

   npm install passport-saml xml-crypto xmldom samlp

2. Создайте файл saml-config.xml, в котором будут содержаться настройки вашего SAML-провайдера. Пример такого файла может выглядеть следующим образом:

   <sp:ServiceProvider xmlns:sp="urn:oasis:names:tc:SAML:2.0:metadata"
                       xmlns:ui="urn:oasis:names:tc:SAML:2.0:metadata:ui"
                       entityID="https://your-app-url.com/metadata">
   
       <sp:AssertionConsumerService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST"
                                    Location="https://your-app-url.com/saml/acs"
                                    index="0" isDefault="true">
           <ui:ServiceName xml:lang="en">My App</ui:ServiceName>
           <ui:Description xml:lang="en">AssertionConsumerService for my app</ui:Description>
       </sp:AssertionConsumerService>
   
       <sp:SingleLogoutService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-Redirect"
                               Location="https://your-app-url.com/saml/sls"
                               ResponseLocation="https://your-app-url.com/saml/sls/response"
                               index="1">
           <ui:ServiceName xml:lang="en">My App</ui:ServiceName>
           <ui:Description xml:lang="en">SingleLogoutService for my app</ui:Description>
       </sp:SingleLogoutService>
   
   </sp:ServiceProvider>

3. Создайте файл saml-strategy.ts, который содержит стратегию аутентификации SAML. Пример кода для этого файла:

   import { Injectable } from "@angular/core";
   import { Strategy } from "passport-saml";
   
   @Injectable()
   export class SamlStrategy extends Strategy {
     constructor() {
       super({
         path: "/saml",
         entryPoint: "https://saml-provider-url.com",
         issuer: "https://your-app-url.com/metadata",
         cert: "path/to/cert.pem",
       });
     }
   
     authenticate(req) {
       super.authenticate(req);
     }
   }

4. Создайте сервис аутентификации, который будет использовать стратегию SAML для авторизации пользователей. Пример такого сервиса:

   import { Injectable } from "@angular/core";
   import { SamlStrategy } from "./saml-strategy";
   
   @Injectable()
   export class AuthService {
     constructor(private samlStrategy: SamlStrategy) {
       passport.use("saml", samlStrategy);
     }
   
     authenticate(req) {
       passport.authenticate("saml", function(err, user, info) {
         if (err) {
           throw err;
         }
         if (!user) {
           throw new Error("User not found");
         }
         return req.logIn(user, function(err) {
           if (err) {
             throw err;
           }
           console.log("User authenticated successfully");
         });
       })(req);
     }
   }

5. Добавьте маршруты для обработки авторизации и создайте страницы для входа и регистрации пользователя.

В файле app-routing.module.ts добавьте следующий код:

   import { Routes } from "@angular/router";
   import { LoginComponent } from "./login/login.component";
   import { RegisterComponent } from "./register/register.component";
   
   export const routes: Routes = [
     { path: "login", component: LoginComponent },
     { path: "register", component: RegisterComponent },
     // Другие маршруты вашего приложения
   ];

В HTML-шаблонах login.component.html и register.component.html добавьте формы для ввода информации о пользователе.

В соответствующих компонентах, login.component.ts и register.component.ts, добавьте методы для отправки данных формы и вызова методов аутентификации сервиса AuthService:

   import { Component } from "@angular/core";
   import { AuthService } from "./auth.service";
   
   @Component({
     selector: "app-login",
     templateUrl: "./login.component.html",
     styleUrls: ["./login.component.css"],
   })
   export class LoginComponent {
     constructor(private authService: AuthService) {}
   
     onSubmit() {
       // Получить данные формы и отправить к сервису AuthService
       // Например: this.authService.login(this.username, this.password);
     }
   }

6. Добавьте код для аутентификации во входной точке вашего приложения, обычно это файл main.ts:

   import { platformNativeScriptDynamic } from "@nativescript/angular";
   import { AppModule } from "./app/app.module";
   import { AuthService } from "./app/auth.service";
   import { SamlStrategy } from "./app/saml-strategy";
   
   platformNativeScriptDynamic().bootstrapModule(AppModule, {
     providers: [AuthService, SamlStrategy],
   });

Теперь вы должны иметь рабочую аутентификацию SAML в вашем приложении NativeScript + Angular. Пользователи смогут войти в систему, используя учетные данные SAML-провайдера, и ваше приложение будет получать подтверждение аутентификации от провайдера SAML. Вы можете использовать эти данные для дальнейшей авторизации пользователей в вашем приложении.