mirror of https://github.com/Squidex/squidex.git
Sebastian
6 years ago
9 changed files with 368 additions and 165 deletions
@ -0,0 +1,166 @@ |
|||
<sqx-modal-dialog (close)="emitComplete()" large="true"> |
|||
<ng-container title> |
|||
Connect |
|||
</ng-container> |
|||
|
|||
<ng-container content> |
|||
<nav aria-label="breadcrumb"> |
|||
<ol class="breadcrumb"> |
|||
<li class="breadcrumb-item breadcrumb-item-done"> |
|||
<i class="icon-checkmark"></i> Setup client |
|||
</li> |
|||
<li class="breadcrumb-item breadcrumb-item-active" |
|||
[class.breadcrumb-item-active]="isStart" |
|||
[class.breadcrumb-item-done]="!isStart"> |
|||
<i class="icon-checkmark"></i> Choose connection method |
|||
</li> |
|||
<li class="breadcrumb-item" |
|||
[class.breadcrumb-item-active]="!isStart"> |
|||
<i class="icon-checkmark"></i> Connect |
|||
</li> |
|||
</ol> |
|||
</nav> |
|||
|
|||
<ng-container [ngSwitch]="step"> |
|||
<ng-container *ngSwitchCase="'Start'"> |
|||
<h3>Choose a connection method</h3> |
|||
|
|||
<sqx-form-hint> |
|||
Start with the Postman tutorial in the <a href="https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman" sqxExternalLink>Documentation</a> |
|||
</sqx-form-hint> |
|||
|
|||
<div class="section"> |
|||
<div class="option" (click)="go('HTTP')"> |
|||
<h5>Connect manually</h5> |
|||
|
|||
<small class="text-muted">Get instructions how to establish a connection with Postman or curl.</small> |
|||
|
|||
<i class="icon-angle-right"></i> |
|||
</div> |
|||
|
|||
<div class="option" (click)="go('CLI')"> |
|||
<h5>Connect with Squidex CLI</h5> |
|||
|
|||
<small class="text-muted">Download the CLI and connect to this app to start backups, sync schemas or export content.</small> |
|||
|
|||
<i class="icon-angle-right"></i> |
|||
</div> |
|||
|
|||
<div class="option" (click)="go('SDK')"> |
|||
<h5>Connect to your App with SDK</h5> |
|||
|
|||
<small class="text-muted">Download an SDK and establish a connection to this app.</small> |
|||
|
|||
<i class="icon-angle-right"></i> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
|
|||
<ng-container *ngSwitchCase="'HTTP'"> |
|||
<div class="section"> |
|||
<h5><span class="badge badge-pill badge-dark">a</span> Get a token using curl</h5> |
|||
|
|||
<p> |
|||
<sqx-code>{{connectHttpText}}</sqx-code> |
|||
</p> |
|||
</div> |
|||
|
|||
<div class="section"> |
|||
<h5><span class="badge badge-pill badge-dark">b</span> Just use the following token</h5> |
|||
|
|||
<p> |
|||
<sqx-code>{{connectToken?.accessToken}}</sqx-code> |
|||
</p> |
|||
</div> |
|||
|
|||
<div class="section"> |
|||
<h5><span class="badge badge-pill badge-dark">2</span> Add the token as HTTP header to all requests</h5> |
|||
|
|||
<p> |
|||
<sqx-code>Authorization: Bearer [YOUR_TOKEN]</sqx-code> |
|||
</p> |
|||
</div> |
|||
|
|||
<div class="section"> |
|||
<sqx-form-hint> |
|||
Tokens usally expire after 30days, but you can request multiple tokens. |
|||
</sqx-form-hint> |
|||
</div> |
|||
</ng-container> |
|||
<ng-container *ngSwitchCase="'CLI'"> |
|||
<div class="section"> |
|||
<h5><span class="badge badge-pill badge-dark">1</span> Get the latest Squidex CLI</h5> |
|||
|
|||
<p> |
|||
<a href="https://github.com/Squidex/squidex-samples/releases" sqxExternalLink>Download the CLI from Github</a> |
|||
|
|||
<sqx-form-hint> |
|||
The releases contains binaries for all major operation system and a small download if you have .NET Core installed. |
|||
</sqx-form-hint> |
|||
</p> |
|||
</div> |
|||
|
|||
<div class="section"> |
|||
<h5><span class="badge badge-pill badge-dark">2</span> Add <samp><your Squidex CLI download directory></samp> to your <samp>$PATH</samp> variable</h5> |
|||
</div> |
|||
|
|||
<div class="section"> |
|||
<h5><span class="badge badge-pill badge-dark">3</span> Add your app name the CLI config</h5> |
|||
|
|||
<p> |
|||
<sqx-code> |
|||
sq config add {{appName}} {{appName}}:{{client.id}} ${{client.secret}} -u ${{apiUrl.value}} |
|||
</sqx-code> |
|||
|
|||
<sqx-form-hint> |
|||
You can manage configuration to multiple apps in the CLI and switch to an app. |
|||
</sqx-form-hint> |
|||
</p> |
|||
</div> |
|||
|
|||
<div class="section"> |
|||
<h5><span class="badge badge-pill badge-dark">4</span> Switch to your app in the CLI</h5> |
|||
|
|||
<p> |
|||
<sqx-code> |
|||
sq config use {{appName}} |
|||
</sqx-code> |
|||
</p> |
|||
</div> |
|||
</ng-container> |
|||
<ng-container *ngSwitchCase="'SDK'"> |
|||
<div class="section"> |
|||
<h5><span class="badge badge-pill badge-dark">1</span> Install the .NET SDK</h5> |
|||
|
|||
<p> |
|||
The SDK is available on <a href="https://www.nuget.org/packages/Squidex.ClientLibrary/" sqxExternalLink>nuget</a> |
|||
</p> |
|||
|
|||
<p> |
|||
<sqx-code>dotnet add package Squidex.ClientLibrary</sqx-code> |
|||
</p> |
|||
</div> |
|||
|
|||
<div class="section"> |
|||
<h5><span class="badge badge-pill badge-dark">2</span> Create a client manager</h5> |
|||
|
|||
<p> |
|||
<sqx-code>{{connectLibraryText}}</sqx-code> |
|||
</p> |
|||
</div> |
|||
|
|||
<div class="section"> |
|||
<sqx-form-hint> |
|||
Need more SDK? <a href="https://support.squidex.io" sqxExternalLink>Contact us in the Support Forum</a> |
|||
</sqx-form-hint> |
|||
</div> |
|||
</ng-container> |
|||
</ng-container> |
|||
</ng-container> |
|||
|
|||
<ng-container footer> |
|||
<button class="btn btn-secondary" [disabled]="isStart" (click)="go('Start')"> |
|||
Back |
|||
</button> |
|||
</ng-container> |
|||
</sqx-modal-dialog> |
|||
@ -0,0 +1,64 @@ |
|||
@import '_vars'; |
|||
@import '_mixins'; |
|||
|
|||
.breadcrumb { |
|||
&-item { |
|||
i { |
|||
display: none; |
|||
} |
|||
|
|||
&-done { |
|||
color: $color-theme-green; |
|||
|
|||
i { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.badge { |
|||
@include circle(1.2rem); |
|||
margin-right: .25rem; |
|||
font-size: 80%; |
|||
padding-left: 0; |
|||
padding-right: 0; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.section { |
|||
margin-top: 2rem; |
|||
|
|||
p { |
|||
padding-left: 1.75rem; |
|||
} |
|||
} |
|||
|
|||
.option { |
|||
@include border-radius; |
|||
cursor: pointer; |
|||
background: none; |
|||
border: 1px solid $color-border; |
|||
padding: 1rem; |
|||
position: relative; |
|||
margin-top: .5rem; |
|||
|
|||
&:hover { |
|||
border-color: darken($color-border, 10%); |
|||
} |
|||
|
|||
i { |
|||
@include absolute(1.6rem, 1rem, auto, auto); |
|||
font-size: 1.8rem; |
|||
font-weight: 300; |
|||
color: $color-border; |
|||
} |
|||
} |
|||
|
|||
.access-token { |
|||
height: 10rem; |
|||
font-size: 1rem; |
|||
font-weight: normal; |
|||
font-family: monospace; |
|||
resize: none; |
|||
} |
|||
@ -0,0 +1,105 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
|||
|
|||
import { |
|||
AccessTokenDto, |
|||
ApiUrlConfig, |
|||
AppsState, |
|||
ClientDto, |
|||
ClientsService, |
|||
DialogService, |
|||
fadeAnimation, |
|||
RoleDto |
|||
} from '@app/shared'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-client-connect-form', |
|||
styleUrls: ['./client-connect-form.component.scss'], |
|||
templateUrl: './client-connect-form.component.html', |
|||
animations: [ |
|||
fadeAnimation |
|||
] |
|||
}) |
|||
export class ClientConnectFormComponent implements OnInit { |
|||
@Output() |
|||
public complete = new EventEmitter(); |
|||
|
|||
@Input() |
|||
public client: ClientDto; |
|||
|
|||
@Input() |
|||
public clientRoles: ReadonlyArray<RoleDto>; |
|||
|
|||
public appName: string; |
|||
|
|||
public connectToken: AccessTokenDto; |
|||
public connectHttpText: string; |
|||
public connectLibraryText: string; |
|||
|
|||
public step = 'Start'; |
|||
|
|||
public get isStart() { |
|||
return this.step === 'Start'; |
|||
} |
|||
|
|||
constructor( |
|||
public readonly appsState: AppsState, |
|||
public readonly apiUrl: ApiUrlConfig, |
|||
private readonly changeDetector: ChangeDetectorRef, |
|||
private readonly clientsService: ClientsService, |
|||
private readonly dialogs: DialogService |
|||
) { |
|||
} |
|||
|
|||
public ngOnInit() { |
|||
this.appName = this.appsState.appName; |
|||
|
|||
this.connectHttpText = connectHttpText(this.apiUrl, this.appName, this.client); |
|||
this.connectLibraryText = connectLibrary(this.apiUrl, this.appName, this.client); |
|||
|
|||
this.clientsService.createToken(this.appsState.appName, this.client) |
|||
.subscribe(dto => { |
|||
this.connectToken = dto; |
|||
|
|||
this.changeDetector.detectChanges(); |
|||
}, error => { |
|||
this.dialogs.notifyError(error); |
|||
}); |
|||
} |
|||
|
|||
public go(step: string) { |
|||
this.step = step; |
|||
} |
|||
|
|||
public emitComplete() { |
|||
this.complete.emit(); |
|||
} |
|||
} |
|||
|
|||
function connectHttpText(apiUrl: ApiUrlConfig, app: string, client: { id: string, secret: string }) { |
|||
const url = apiUrl.buildUrl('identity-server/connect/token'); |
|||
|
|||
return `$ curl
|
|||
-X POST '${url}' |
|||
-H 'Content-Type: application/x-www-form-urlencoded' |
|||
-d 'grant_type=client_credentials& |
|||
client_id=${app}:${client.id}& |
|||
client_secret=${client.secret}& |
|||
scope=squidex-api`;
|
|||
} |
|||
|
|||
function connectLibrary(apiUrl: ApiUrlConfig, app: string, client: { id: string, secret: string }) { |
|||
const url = apiUrl.value; |
|||
|
|||
return `var clientManager = new SquidexClientManager(
|
|||
"${url}", |
|||
"${app}", |
|||
"${app}:${client.id}", |
|||
"${client.secret}")`;
|
|||
} |
|||
Loading…
Reference in new issue