テンプレート処理中にエラーが発生しました。
Java method "com.liferay.portal.json.JSONFactoryImpl.createJSONObject(String)" threw an exception when invoked on com.liferay.portal.json.JSONFactoryImpl object "com.liferay.portal.json.JSONFactoryImpl@51577ebb"; see cause exception in the Java stack trace.

----
FTL stack trace ("~" means nesting-related):
	- Failed at: navigationJSONObject = jsonFactoryUti...  [in template "17855804202317#32484267#LEARN-ARTICLE-NAV" at line 4, column 9]
----
1<#assign 
2	groupFriendlyURL = themeDisplay.getScopeGroup().getFriendlyURL() 
3	groupPathFriendlyURLPublic = themeDisplay.getPathFriendlyURLPublic() + groupFriendlyURL 
4	navigationJSONObject = jsonFactoryUtil.createJSONObject(navigation.getData()) 
5	navigationMenuItems = 
6
7			"Analytics Cloud": { 
8				"image": "/documents/d${groupFriendlyURL}/analytics_c-svg", 
9				"title": "Analytics Cloud", 
10				"url": "analytics-cloud" 
11			}, 
12			"Commerce": { 
13				"image": "/documents/d${groupFriendlyURL}/commerce_product-svg", 
14				"title": "Commerce", 
15				"url": "commerce" 
16			}, 
17			"DXP": { 
18				"image": "/documents/d${groupFriendlyURL}/dxp_p-svg", 
19				"title": "DXP / Portal", 
20				"url": "dxp" 
21			}, 
22			"Liferay Cloud": { 
23				"image": "/documents/d${groupFriendlyURL}/dxp_c-svg", 
24				"title": "Liferay Cloud", 
25				"url": "liferay-cloud" 
26			}, 
27			"Reference": { 
28				"image": "/documents/d${groupFriendlyURL}/reference-svg", 
29				"title": "Reference", 
30				"url": "reference" 
31
32
33 
34	breadcrumbJSONArray = navigationJSONObject.getJSONArray("breadcrumb") 
35	childrenJSONArray = navigationJSONObject.getJSONArray("children") 
36	parentJSONObject = navigationJSONObject.getJSONObject("parent") 
37	productJSONObject = breadcrumbJSONArray.getJSONObject(breadcrumbJSONArray.length()-1)!navigationJSONObject.getJSONObject("self") 
38	siblingsJSONArray = navigationJSONObject.getJSONArray("siblings") 
39/> 
40 
41<div class="learn-article-nav"> 
42	<#if productJSONObject?has_content && productJSONObject.getString("title")?has_content && navigationMenuItems[productJSONObject.getString("title")]?has_content && navigationMenuItems[productJSONObject.getString("title")].title?has_content> 
43		<div 
44			class="dropdown learn-article-nav-root learn-dropdown" 
45
46			<div class="learn-article-nav-item"> 
47				<div class="d-flex"> 
48					<div class="learn-article-nav-image"> 
49						<img 
50							class="lexicon-icon lexicon-icon-caret-bottom product-icon" 
51							role="presentation" 
52							src='${navigationMenuItems[productJSONObject.getString("title")].image}' 
53							viewBox="0 0 512 512" 
54						/> 
55					</div> 
56 
57					<span class="learn-article-nav-text">${navigationMenuItems[productJSONObject.getString("title")].title}</span> 
58				</div> 
59 
60				<div id="dropdown-icon"> 
61					<svg 
62						class="lexicon-icon lexicon-icon-caret-bottom" 
63						role="presentation" 
64						viewBox="0 0 512 512" 
65
66						<use xlink:href="/o/admin-theme/images/clay/icons.svg#caret-bottom"></use> 
67					</svg> 
68				</div> 
69			</div> 
70 
71			<ul class="dropdown-menu learn-dropdown-menu"> 
72				<#list navigationMenuItems as key, value> 
73					<li> 
74						<a 
75							class="dropdown-item learn-article-nav-item" 
76							href="/w/${navigationMenuItems[key].url}/index" 
77							tabindex="4" 
78
79							<span class="d-flex"> 
80								<span class="learn-article-nav-image"> 
81									<img 
82										class="lexicon-icon lexicon-icon-caret-bottom product-icon mt-0 mr-2" 
83										role="presentation" 
84										src="${value.image}"height: 25px; margin-left: 5px; max-width: none; width: 25px; 
85										viewBox="0 0 512 512" 
86									/> 
87								</span> 
88								<span class="learn-article-nav-text">${value.title}</span> 
89							</span> 
90 
91							<#if navigationMenuItems[productJSONObject.getString("title")].url == value.url> 
92								<span> 
93									<@clay["icon"] symbol="check" /> 
94								</span> 
95							</#if> 
96						</a> 
97					</li> 
98				</#list> 
99			</ul> 
100		</div> 
101	</#if> 
102 
103	<div class="learn-article-nav-content"> 
104		<#if parentJSONObject?has_content && parentJSONObject.getString("url")?has_content> 
105			<div class="learn-article-nav-item learn-article-nav-parent liferay-nav-item p-2"> 
106				<div class="mr-2"> 
107					<a 
108						href='${parentJSONObject.getString("url")}' 
109
110						<svg 
111							class="lexicon-icon lexicon-icon-angle-left" 
112							role="presentation" 
113							viewBox="0 0 512 512" 
114
115							<use xlink:href="/o/admin-theme/images/clay/icons.svg#angle-left"></use> 
116						</svg> 
117					</a> 
118				</div> 
119 
120				<span>${parentJSONObject.getString("title")}</span> 
121			</div> 
122		</#if> 
123 
124		<#if childrenJSONArray.length() gt 0> 
125			<ul class="m-0 p-2"> 
126				<#list 0..childrenJSONArray.length()-1 as i> 
127					<li class="learn-article-nav-item"> 
128						<a 
129							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == childrenJSONArray.getJSONObject(i).url)?then("selected", "")}' 
130							href="${childrenJSONArray.getJSONObject(i).url}" 
131
132							<span>${childrenJSONArray.getJSONObject(i).getString("title")}</span> 
133						</a> 
134					</li> 
135				</#list> 
136			</ul> 
137		<#elseif siblingsJSONArray.length() gt 0> 
138			<ul class="m-0 p-2"> 
139				<#list 0..siblingsJSONArray.length()-1 as i> 
140					<li class="learn-article-nav-item"> 
141						<a 
142							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == siblingsJSONArray.getJSONObject(i).url)?then("selected", "")}' 
143							href="${siblingsJSONArray.getJSONObject(i).url}" 
144
145							<span>${siblingsJSONArray.getJSONObject(i).getString("title")}</span> 
146						</a> 
147					</li> 
148				</#list> 
149			</ul> 
150		</#if> 
151	</div> 
152</div> 

OAuth2によるアカウントアクセスの認証

アプリケーションの登録が完了したら、ユーザーの認証を開始します。 そのためには、認可サーバー(Liferay DXP)へのURLを構築する必要があります。 認可サーバーは、前のチュートリアルでスコープとして見たように定義されたリソースに要求されたパーミッションを認可するようにユーザーに要求します。

認証コードフロー

最も一般的なOAuthフローは、Webアプリケーションで使用されるAuthorization Codeフローです。 このためのURLには、以下のリクエストパラメーターが必要です。

  • response_type
  • client_id

この認証のためのURLを構成するには、次のパターンに従います。

https://[hostname]/o/oauth2/authorize?response_type=code&client_id=[client ID]

クライアントIDは、アプリケーションを登録した際に得られるものです。 自動生成されます(アプリケーションを編集すれば変更可能です)。

ユーザーがリソースへの要求されたアクセス許可を承認すると、承認サーバーは、登録されたコールバックURI(別名リダイレクトURI)でアプリケーションに認証コードを クエリ文字列パラメーターとして返します。

[your callback URI]?code=[authorization server generated code]

アプリケーションは、このパターンに従ってPOSTリクエストを送信することで、この認証コードとアクセストークンを交換する必要があります。

http://localhost:8080/o/oauth2/token
important

時々、「ウェブアプリケーション」という言葉が緩やかに使われ、上記のURLがウェブブラウザから直接要求されるようなアプリケーションを意味することがあります。 もしそうなれば、クライアントの秘密が漏れてしまい、グラントフローとアプリケーションのセキュリティが損なわれることになります。 そのような場合は、アプリケーションの登録時に、代わりに「User Agent Application」クライアントプロファイルを選択してください。 これにより、お客様のアプリケーションで安全な代替手段を利用することができます。PKCE Extended Authorization Codeフロー(下記参照)。

ボディに以下のパラメータを含む( application/x-www-form-urlencodedとしてエンコードされています)。

client_id=[client ID] client_secret=[client secret] grant_type=authorization_code code=[authorization server generated code] redirect_uri=[registered callback URI]

このリクエストに対するHTTPレスポンスのボディには、次のようなJSONが格納されています。

{
  "access_token": "[authorization server generated access token]",
  "token_type": "Bearer",
  "expires_in": 600,
  "scope": "[the scopes that were authorized by the user]",
  "refresh_token": "[authorization server generated refresh token]"
}

ここからアクセストークンを抽出し、永続化する必要があります。 トークンを無期限で使用する場合(上記の例では600秒以上)には、リフレッシュ・トークンも必要です。 これは、Refresh Token Flowと組み合わせて使用することで、さらなるユーザー認証を行うことなく、同じ権限を持つ新しいアクセストークンを取得することができます。 認可サーバーは、アプリケーション登録がこのフローに登録されている場合のみ、リフレッシュトークンを発行します。

PKCE拡張認証コードフロー

このフローは、コード交換のための証明鍵(PKCE)を追加したもので、上記と同じです。 code_challengeという別のリクエストパラメーターが必要です。 このフローは、スマートフォンアプリケーションのように、ユーザー認証後に認証サーバーからリダイレクトされたURL(およびリクエストパラメータ)に単独でアクセスできない可能性があるクライアントのためのものです。 同じシステム上にある悪意のあるアプリケーションが、レスポンスコードを読み取ることで自身を認証することを防ぐことができます。 そのために、クライアントアプリケーションは、認証要求とともに、自分だけが知っている生成した文字列である コードチャレンジ を送信します。 この文字列を生成するためには、まず Code Verifier と呼ばれる別の秘密文字列を作成し、それに変換を施す必要がある。 認証後、コードベリファイアが認証コードとともに送信され、クライアントを検証する。

これを行う方法の詳細は、 PKCE仕様 を参照してください。

このフローをサポートするには、アプリケーションの作成時に、Allowed Authorization TypeとしてPKCEを定義しておく必要があります。 これは、Native ApplicationおよびUser Agent Applicationのクライアントプロファイルの一部です。 PKCEを使用して認証コードを要求するには、 code_challenge リクエストパラメータを含むURLを使用します。

https://[hostname]/o/oauth2/authorize?response_type=code&client_id=[client ID]&code_challenge=[PKCE code challenge]

アクセストークンを取得するための最後のリクエストを行う際に、以下のパラメータも提供する必要があることを除いて、残りの処理はAuthorization Codeのフローと同じです。

code_verifier=[Code Verifier that was transformed and sent as code_challenge previously]

クライアント認証とリソース所有者のフロー

その他に、あまり使われていないフローが2つあります。 2つのサーバーが合意された、ユーザー中心でないデータを交換するシナリオがある場合は、ユーザーの[Allow/Deny]画面をバイパスして、クライアントを承認できます。 これはClient Credentialsフローと呼ばれ、このURLパターンを使用することになる。

https://[hostname]/o/oauth2/token?grant_type=client_credentials&client_id=[client ID]&client_secret=[client secret]

最終的に、ユーザーがアプリケーションにパスワードを託すという流れは、まれではありますが、あり得ます。 これはResource Owner Passwordフローと呼ばれ、そのURLパターンは次のようになる。

https://[hostname]/o/oauth2/token?grant_type=password&client_id=[client ID]&client_secret=[client secret]&username=[user@emailaddress.com]&password=

ユーザーはパスワードの入力を求められ、ログインに成功すると認証コードを受け取ります。

トークン使用

上記のすべてのフローは、認可サーバー(Liferay)からクライアントアプリケーションに送信されるアクセストークンを生成します。 このトークンはレスポンスとして送信され、クライアントアプリケーションはこれを保存し、今後データを要求する際に送信することができます。

例えば、認証コード 946856e2b5ddf0928f6fc55f657bab73 がクライアントアプリケーションに送信されたとする。 クライアントがデータを要求するとき、このコードを各リクエストヘッダで送信する必要があります。 CurlなどのコマンドラインHTTPクライアントを使用すると、次のようなリクエストを送ることができます。

curl -H 'Authorization: Bearer 946856e2b5ddf0928f6fc55f657bab73' 'https://[hostname]/o/api/sample2'

OAuth 2.0は、クライアントアプリケーションが、クレデンシャル情報を共有することなく、ユーザーから特定のサービス(スコープ)へのアクセスを許可される便利な方法を提供します。

アクセス権の剥奪

一度アクセス権が付与されると、ユーザーまたは管理者はいつでも自由にアクセス権を取り消すことができます。 このようなことがクライアントに起こった場合、トークンは無効となり、クライアントはユーザーに再度認証を求める必要があります。 これにより、ユーザーは自分のデータにアクセスできる者をコントロールすることができ、いつでもこのコントロールを行使することができます。

ユーザーは、自分のアカウントプロファイル内のデータにアクセスできるアプリケーションを完全に制御できます。

ユーザーは自分のアカウント領域で、 [接続済みのアプリケーション] をクリックして、自分のアカウントへのアクセスを許可したアプリケーションのリストを表示できます。 ここから、アクションメニューの [Remove Access] アイテムまたはアプリケーションの詳細画面の [Remove Access] ボタンをクリックして、アクセスを取り消すことができます。

[接続済みのアプリケーション]では、ユーザーは承認されたアプリを表示してアクセスを取り消すことができます。

管理者は、 [コントロールパネル] → [設定] → [OAuth2 管理] の任意のアプリの[権限]タブで権限を表示できます。 アプリが信頼されている場合、または[Remember My Authorization]チェックボックスがオンになっている場合は、その情報が表示されます。

アプリのすべての権限は、アプリの[権限]タブに表示されます。

リストされている承認の [Revoke] ボタンをクリックすると、そのユーザーのアカウントへのそのアプリケーションのアクセスが取り消されます。

概要

OAuth 2.0は、ユーザーが認証情報を共有することなく、完全かつ安全な認証フローを提供します。 OAuth 2.0は、ユーザーや開発者が必要な情報にアクセスするための便利な方法です。