Question

我正在尝试遵循此tutorial。但是我被困在这部分上使用Okta保护后端API 。

我遇到以下错误状态为：401未经授权的URL：http://localhost:8000/api/players

我已经将http://localhost:4200设置为okta帐户中的可信任来源。

这是我的代码

Laravel的AuthenticateWithOkta.php

namespace App\Http\Middleware;

use Closure;

class AuthenticateWithOkta
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if ($this->isAuthorized($request)) {
            return $next($request);
        } else {
            return response('Unauthorized.', 401);
        }
    }

    public function isAuthorized($request)
    {
        if (! $request->header('Authorization')) {
            return false;
        }

        $authType = null;
        $authData = null;

        // Extract the auth type and the data from the Authorization header.
        @list($authType, $authData) = explode(" ", $request->header('Authorization'), 2);

        // If the Authorization Header is not a bearer type, return a 401.
        if ($authType != 'Bearer') {
            return false;
        }

        // Attempt authorization with the provided token
        try {

            // Setup the JWT Verifier
            $jwtVerifier = (new \Okta\JwtVerifier\JwtVerifierBuilder())
                            ->setAdaptor(new \Okta\JwtVerifier\Adaptors\SpomkyLabsJose())
                            ->setAudience('api://default')
                            ->setClientId('{HERE MY CLIENT ID}')
                            ->setIssuer('https://dev-{MY ISSUER NUMBERS}.okta.com/oauth2/default')
                            ->build();

            // Verify the JWT from the Authorization Header.
            $jwt = $jwtVerifier->verify($authData);
        } catch (\Exception $e) {

            // We encountered an error, return a 401.
            return false;
        }

        return true;
    }

}

来自Angular的app.module.ts

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { TriviaGameComponent } from './trivia-game/trivia-game.component';

import { Routes, RouterModule } from '@angular/router';
import { OktaAuthModule, OktaCallbackComponent } from '@okta/okta-angular';

import { HttpModule } from '@angular/http';

const routes: Routes = [
    { path: '', component: HomeComponent, pathMatch: 'full' },
    { path: 'trivia', component: TriviaGameComponent },
    { path: 'implicit/callback', component: OktaCallbackComponent },
    { path: '**', redirectTo: '', pathMatch: 'full' },
];

const oktaConfig = {
  issuer: 'https://dev-{ISSUER NUMBERS}.okta.com/oauth2/default',
  redirectUri: 'http://localhost:4200/implicit/callback',
  clientId: '{CLIENT ID}'
};

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    TriviaGameComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot(routes),
    OktaAuthModule.initAuth(oktaConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular的

player.service.ts

import { OktaAuthService } from '@okta/okta-angular';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';

export interface Player {
    id: Number,
    name: String,
    answers: Number,
  points: number,
  isUpdating: boolean,
}

const API_URL: string = 'http://localhost:8000';

@Injectable({
  providedIn: 'root'
})
export class PlayerService {

    private accessToken;
    private headers;

    constructor(private oktaAuth: OktaAuthService, private http: Http) {
        this.init();
    }

    async init() {
        this.accessToken = await this.oktaAuth.getAccessToken();
        this.headers = new Headers({
            Authorization: 'Bearer ' + this.accessToken
        });
    }

    getPlayers(): Observable<Player[]> {
        return this.http.get(API_URL + '/api/players',
            new RequestOptions({ headers: this.headers })
        )
        .map(res => {
          let modifiedResult = res.json().data
                modifiedResult = modifiedResult.map(function(player) {
            player.isUpdating = false;
            return player;
          });
          return modifiedResult;
        });
    }
}

任何人都可以按照本教程检查错误是否出现吗？

更新

我解决了我的问题，在文件AuthenticateWithOkta.php的末尾发现了print（$ e）的许多问题

他们中的几个正在考虑更新php.ini中的以下几行

curl.cainfo =“ D：\ xampp \ php \ extras \ ssl \ cacert.pem” openssl.cafile =“ D：\ xampp \ php \ extras \ ssl \ cacert.pem”

另一件事是关于切换此部分

-> setAdaptor（新\ Okta \ JwtVerifier \ Adaptors \ SpomkyLabsJose（）为此

-> setAdaptor（new \ Okta \ JwtVerifier \ Adaptors \ FirebasePhpJwt（））

最后一个问题是关于CORS并向请求中添加正确的标头

响应状态：401未经授权，URL laravel angular okta

0 个答案: