據悉，全美第2大車廠福特汽車公司（Ford Motor）準備展示1款插電式混合動力電動車，這款車透過車頂太陽能板充電。C-Max Solar Energi將在7日起於拉斯維加斯登場的2014國際消費電子展（International Consumer Electronics Show）亮相。

C-Max純靠電力可行駛大約21英里（34公里），最遠行程620英里左右。C-Max的車頂配備SunPower公司300至350瓦的太陽能電池，預告未來可能生產不需插電的量產充電車。

這輛車的概念包括設置類似頂篷的停車棚，運用菲涅爾透鏡（Fresnel lenses）將陽光聚焦在這輛車，提高太陽能電池的效能。這款電動車還配有與充電站接合的標準充電器。

這款車由喬治亞理工學院（Georgia Institute of Technology）研發，可隨太陽的移動方向轉換位置。福特預估，該公司去年賣出超過8萬5000輛混合動力車及電動車。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

※南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

※教你寫出一流的銷售文案?

※超省錢租車方案

日本汽車龍頭豐田6日表示，將於2015年首先在美國市場推出具「零排放」功能的「氫燃料電池車」，此款車型名稱暫定為FCV，利用氫燃料電池做為動力來源，行駛時僅排放水蒸氣。該款車型的售價將控制在5~10萬美元之間。該款車型在日本市場的推出時間，料將與美國市場同步。豐田的競爭對手現代與本田也表示將於明年推出同類型的汽車。

豐田銷售副資深副總卡特（Bob Carter）表示，FCV在功能上屬於一般車型，是一款零排放、電力驅動、中型規格、4門轎車的車款，將配合加州政府的充電站政策，於當地優先推出。

豐田大幅改造氫燃料電池車的車型設計，使氫燃料電池在運作過程中，大幅降低對氧氣的需求。氫氣車在充滿電力後，可行駛300英里（約480公里）的車程。充電時間僅需費時3~5分鐘。

豐田近來與加州大學合作，表示最初的1萬輛氫氣車，僅有舊金山與聖地牙哥一帶的68座充電站，能夠支援氫燃料電力。但為方便未來的充電需求，加州政府已通過2億美元經費，規劃在2015年、2016年、與2024年，分別新增20座、40座，與100個充電站。卡特指出，如果設置適當，只須利用加州目前1萬座加油站當中的15％，將其轉型成氫燃料充電站，就可充分提供電力需求。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※南投搬家公司費用需注意的眉眉角角，別等搬了再說!

※新北清潔公司,居家、辦公、裝潢細清專業服務

※教你寫出一流的銷售文案?

據日經新聞11日報導，因看好今後日本國內快速充電器可望日益普及，汽車大廠三菱汽車(Mitsubishi Motors)計畫擴增插電式油電混合車(PHV)的車種數量；並計畫投資約50億日圓改良主力生產據點「名古屋製作所」的產線，目標為在2015年5月底前將PHV年產能倍增至6萬台的水準、並計劃於2015年開始出口至北美進行販售。

目前PHV等環保車款佔三菱汽車整體產量比重僅2%，但三菱汽車計劃於2020年度將其比重提高至20%的水準。三菱汽車已於2013年1月開賣PHV車種「Outlander PHEV」，目前日本國內累計銷售量為1萬台、歐洲市場累銷也約1萬台。而除了Outlander車種之外，三菱汽車也計畫推出「Pajero」及「RVR」車款的PHV。

Outlander PHEV

日經新聞曾於2013年7月報導指出，豐田汽車(Toyota)、日產汽車(Nissan)、本田汽車(Honda)及三菱汽車(Mitsubishi Motors)等日本4大車廠計畫攜手合作，計畫將日本國內使用於電動車等車種的快速充電器設置數量擴增至4,000座以上，將較現行提高1倍。以期望藉由擴充充電設備，擴大電動車及插電式油電混合車(PHV)市場。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※想知道最厲害的網頁設計公司"嚨底家"!

※幫你省時又省力,新北清潔一流服務好口碑

※別再煩惱如何寫文案,掌握八大原則!

※產品缺大量曝光嗎?你需要的是一流包裝設計!

angular 接入 IdentityServer4

Intro

最近把活動室預約的項目做了一個升級，預約活動室需要登錄才能預約，並用 IdentityServer4 做了一個統一的登錄註冊中心，這樣以後就可以把其他的需要用戶操作的應用統一到 IdentityServer 這裏，這樣就不需要在每個應用里都做一套用戶的機制，接入 IdentityServer 就可以了。

目前活動室預約的服務器端和基於 angular 的客戶端已經完成了 IdentityServer 的接入，並增加了用戶的相關的一些功能，比如用戶可以查看自己的預約記錄並且可以取消自己未開始的預約，

還有一個小程序版的客戶端暫時還未完成接入，所以小程序版目前暫時是不能夠預約的

為什麼要寫這篇文章

目前在網上看到很多都是基於 implicit 模式接入 IdentityServer，這樣實現起來很簡單，但是現在 OAuth 已經不推薦這樣做了，OAuth 推薦使用 code 模式來代替 implicit

implicit 模式會有一些安全風險，implicit 模式會將 accessToken 直接返回到客戶端，而 code 模式只是會返回一個 code，accessToken 和 code 的分離的兩步，implicit 模式很有可能會將 token 泄露出去

詳細可以參考 StackOverflow 上的這個問答

https://stackoverflow.com/questions/13387698/why-is-there-an-authorization-code-flow-in-oauth2-when-implicit-flow-works

除此之外，還有一個小原因，大多是直接基於 oidc-client 的 一個 npm 包來實現的，我是用了一個針對 angular 封裝的一個庫 angular-oauth2-oidc，如果你在用 angular ，建議你可以嘗試一下，針對 angular 做了一些封裝和優化，對 angular 更友好一些

準備接入吧

API 配置

預約系統的 API 和網站管理系統是在一起的，針對需要登錄才能訪問的 API 單獨設置了的 policy 訪問

services.AddAuthentication()
    .AddIdentityServerAuthentication(IdentityServerAuthenticationDefaults.AuthenticationScheme, options =>
    {
        options.Authority = Configuration["Authorization:Authority"];
        options.RequireHttpsMetadata = false;

        options.NameClaimType = "name";
        options.RoleClaimType = "role";
    })
    ;

services.AddAuthorization(options =>
{
    options.AddPolicy("ReservationApi", builder => builder
        .AddAuthenticationSchemes(IdentityServerAuthenticationDefaults.AuthenticationScheme)
        .RequireAuthenticatedUser()
        .RequireScope("ReservationApi")
    );
});

需要授權才能訪問的接口設置 Authorize 並指定 Policy 為 ReservationApi

[Authorize(Policy = "ReservationApi")]
[HttpPost]
public async Task<IActionResult> MakeReservation([FromBody] ReservationViewModel model)

IdentityServer Client 配置

首先我們需要在 IdentityServer 這邊添加一個客戶端，因為我們要使用 code 模式，所以授權類型需要配置 authorization-code 模式，不使用 implicit 模式

允許的作用域（scope） 是客戶端允許訪問的 api 資源和用戶的信息資源，openid 必選，profile 是默認的用戶基本信息的集合，根據自己客戶端的需要進行配置，ReservationApi 是訪問 API 需要的 scope，其他的 scope 根據客戶端需要進行配置

angular 客戶端配置

安裝 angular-oauth2-oidc npm 包，我現在使用的是 9.2.0 版本

添加 oidc 配置：

export const authCodeFlowConfig: AuthConfig = {
  issuer: 'https://id.weihanli.xyz',

  // URL of the SPA to redirect the user to after login
  redirectUri: window.location.origin + '/account/callback',

  clientId: 'reservation-angular-client',

  dummyClientSecret: 'f6f1f917-0899-ef36-63c8-84728f411e7c',

  responseType: 'code',

  scope: 'openid profile ReservationApi offline_access',

  useSilentRefresh: false,

  showDebugInformation: true,

  sessionChecksEnabled: true,

  timeoutFactor: 0.01,

  // disablePKCI: true,

  clearHashAfterLogin: false
};

在 app.module 引入 oauth 配置

  imports: [
    BrowserModule,
    AppRoutingModule,
    AppMaterialModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    OAuthModule.forRoot({
      resourceServer: {
        allowedUrls: ['https://reservation.weihanli.xyz/api'],
        sendAccessToken: true
      }
    })
  ]

OAuthModule 里 resourceServer 中的 allowedUrls 是配置的資源的地址，訪問的資源符合這個地址時就會自動發送 accessToken，這樣就不需要自己實現一個 interceptor 來實現自動在請求頭中設置 accessToken 了

在 AppComponment 的構造器中初始化 oauth 配置，並加載 ids 的發現文檔

export class AppComponent {
  constructor(
        private oauth: OAuthService
    ) {
    this.oauth.configure(authConfig.authCodeFlowConfig);
    this.oauth.loadDiscoveryDocument();
    }
    // ...
}

添加一個 AuthGuard，路由守衛，需要登錄才能訪問的頁面自動跳轉到 /account/login 自動登錄

AuthGuard:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router, private oauthService: OAuthService) {}

  canActivate() {
    if (this.oauthService.hasValidAccessToken()) {
      return true;
    } else {
      this.router.navigate(['/account/login']);
      return false;
    }
  }
}

路由配置：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ReservationListComponent } from './reservation/reservation-list/reservation-list.component';
import { NoticeListComponent } from './notice/notice-list/notice-list.component';
import { NoticeDetailComponent } from './notice/notice-detail/notice-detail.component';
import { AboutComponent } from './about/about.component';
import { NewReservationComponent } from './reservation/new-reservation/new-reservation.component';
import { LoginComponent } from './account/login/login.component';
import { AuthGuard } from './shared/auth.guard';
import { AuthCallbackComponent } from './account/auth-callback/auth-callback.component';
import { MyReservationComponent } from './account/my-reservation/my-reservation.component';

const routes: Routes = [
  { path: '', component: ReservationListComponent },
  { path: 'reservations/new', component:NewReservationComponent, canActivate: [AuthGuard] },
  { path: 'reservations', component: ReservationListComponent },
  { path: 'notice', component: NoticeListComponent },
  { path: 'notice/:noticePath', component: NoticeDetailComponent },
  { path: 'about', component: AboutComponent },
  { path: 'account/login', component: LoginComponent },
  { path: 'account/callback', component: AuthCallbackComponent },
  { path: 'account/reservations', component: MyReservationComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '/'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

AccountLogin 會將用戶引導到 ids 進行登錄，登錄之後會跳轉到配置的重定向 url，我配置的是 account/callback

import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {

  constructor(private oauthService: OAuthService) {
  }

  ngOnInit(): void {
    // 登錄
    this.oauthService.initLoginFlow();
  }

}

Auth-Callback

import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { Router } from '@angular/router';

@Component({
  selector: 'app-auth-callback',
  templateUrl: './auth-callback.component.html',
  styleUrls: ['./auth-callback.component.less']
})
export class AuthCallbackComponent implements OnInit {

  constructor(private oauthService: OAuthService, private router:Router) {
  }

  ngOnInit(): void {
    this.oauthService.loadDiscoveryDocumentAndTryLogin()
    .then(_=> {
      this.oauthService.loadUserProfile().then(x=>{
        this.router.navigate(['/reservations/new']);
      });
    });
  }

}

More

當前實現還不太完善，重定向現在始終是跳轉到的新預約的頁面，應當在跳轉登錄之前記錄一下當前的地址保存在 storage 中，在 auth-callback 里登錄成功之後跳轉到 storage 中之前的地址

Reference

• https://sunnycoding.cn/2020/03/14/angular-spa-auth-with-ocelot-and-ids4-part3/#i-2
• https://github.com/OpenReservation/angular-client
• https://github.com/manfredsteyer/angular-oauth2-oidc/
• https://github.com/OpenReservation/ReservationServer

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

※南投搬家公司費用,距離,噸數怎麼算?達人教你簡易估價知識!

※教你寫出一流的銷售文案?

※超省錢租車方案