FlaskとAngular JSを利用している際に、エラーが起こる
FlaskでAngular JSを利用して以下のようなHTMLコードを書いているときに、エラーが表示される。
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<h1>リダイレクトURL</h1>
<p>OAuth Providerで登録した、Client IDと、リダイレクトURLを入力してください。</p>
<form>
<label for="client_id">クライアントID</label>
<input type="textfield" name="client_id" id="client_id" ng-model="client_id" placeholder="クライアントID"></input>
<label for="redirect_uri">リダイレクトURL</input>
<input type="textfield" name="redirect_uri" id="redirect_uri" ng-model="redirect_uri" placeholder="リダイレクトURL"></input>
<label for="textfield">スコープ</label>
<input type="textfield" name="scope" id="scope" ng-model="scope" placeholder="scope"></input>
</form>
<p>生成されたURL</p>
<a href="https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=263680507619-6sm2e6jv584ilmd7h6jrn5dstk6magke.apps.googleusercontent.com&redirect_uri=http://127.0.0.1:5000/callback.html/&scope=https://www.googleapis.com/auth/calendar
">これじゃ</a>
<p>{{client_id + redirect_uri + scope}} </p>
{% if result %}
<h1>アクセストークン</h1>
<form method="post">
<label>Access Token</label>
<blockquote>{{ result }}</blockquote>
<input type="textfield" name="access_token" value="{{result}}">
<input type="submit"></input>
</form>
{% endif %}
{% if schedule %}
<h1>スケジュール一覧</h1>
<blockquote>{{ schedule }}</blockquote>
{% endif %}
<!-- javascript-->
<script>
</script>
</body>
</html>
jinja2.exceptions.UndefinedError
jinja2.exceptions.UndefinedError: 'client_id' is undefined
原因
FlaskもAngular JSも、変数を挿入するときに、{{}}を利用するので、
Angular JSで挿入した変数がFlaskのPythonの変数だと認識されてしまう模様。
解決策
さきほどの
{{client_id + redirect_uri + scope}}
を、以下のように変換することで回避できた。
{{"{{client_id + redirect_uri + scope}}"}}
ログ
#Flask #AngularJS— Dai Kawai@RubyPython (@never_be_a_pm) January 21, 2018
FlaskとAngular JS、両方とも変数をViewに挿入するのが{{hoge}}の形なので、AngularでやろうとしていることがFlaskだと認識され、そんな値がありませんと言われる。これどうやって回避するんだろう。
#Flask #AngularJS— Dai Kawai@RubyPython (@never_be_a_pm) January 21, 2018
解決方法があった、AngularJSの{{}}を任意の値に変換することができるっぽい。これをちゃんと変換してあげれば、実行できそうだね。https://t.co/70ztQqYwXQ pic.twitter.com/7Jch3D3Sb5
#Flask #Angular— Dai Kawai@RubyPython (@never_be_a_pm) January 21, 2018
お～動いた。
Angular JS使えば、動的にURLの生成ができるなぁ
これは非常に便利だ！
ドットインストールで学べた。https://t.co/mFYvRrBmN7 pic.twitter.com/L0s7A1QvVq
