雑記まみむメモ

雑記、メモ、技法、話題の騒動などを紹介します。

Vue + Typescript で画面遷移時のイベントを取得する方法

Typescript Vue.js 
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import VueRouter from 'vue-router'

Component.registerHooks(['beforeRouteLeave'])

@Component({
  components: {}
})
export default class AccountAdd extends Vue {
  private beforeRouteLeave(to: VueRouter, from: VueRouter, next: any) {
    window.confirm('このページから移動しますか？登録中のデータは保存されません') ? next() : next(false)
  }
}
</script>

■

Facebook OAuth アクセストークン

Facebook OAuth認証について

参考資料

Facebookログイン機能をWEBサイトにSDK等使わないで実装の流れ

facebookのoauthを使ってみる（emailも取得）

FacebookとSNS連携！SDKを使わずにOAuth2でアクセストークン取得する/PHP

Facebookにてサイト情報などの設定

facebookアプリの登録

  • まずfacebookアカウントを作成します。
  • Facebook for developersを開く。
    • 右上の[My Apps]を選び、[Add a New App]を選択。
    • ウェブサイトを選択
    • アプリの名前を入力。日本語でもOK。
    • テストバージョン、連絡先メールアドレス、カテゴリを指定する。
  • アプリのトップページから「Facebookログイン」の設定を選択
  • プラットフォームをウェブで選択
  • サイトのURLを入力→[save]→[次へ]
  • 左メニューより「設定」を押下
  • 有効なOAuthリダイレクトURIを設定にコールバック用のURLを設定
  • client_id = アプリID
  • client_secret = app secret
    • アプリ設定→ベーシック→app secret表示

OAuth認証

リクエストパラメータ

GET https://www.facebook.com/dialog/oauth
param key value
client_id [クライアントID]
state [CSRF攻撃対策用の値]
response_type code
redirect_uri [コールバックURL]
scope ads_read,ads_management,business_management

※CSRF攻撃対策用の値について

セッションIDをHashした値を使用するなど。ここらへんを参考。 OAuth 2.0のstateとredirect_uriとOpenID ConnectのnonceとID Tokenについて 大抵CSRF対策のトークンを作る仕組みはプログラムやライブラリに用意されているのでそれを使うのが良いか。

リクエストサンプル

# ブラウザで開く
https://www.facebook.com/dialog/oauth?client_id=2301467433495594&state=463b3841278b9bad69890d7f22ca246e&response_type=code&redirect_uri=https://hogehoge.com/oauth/facebook/callback.php&scope=ads_read,ads_management,business_management

OAuth認証 callback

GET https://hogehoge.com/oauth/facebook/callback.php?code=AQD6vr3EZ4NC169LwiPb7tydPdEyhCj6pJbFw_TwS3JH8Qnt9vvOhQGmKP5Ji2uzpUyeUjx9sbN5_rm5I8YQHyZPqsNdqpS0D4nYU-5qjgBcAc2Pj6I7rKknKiVPGT9hCGTOhu0noTIdgUYmyf21OrR7oGdJyBUHy4iOvwPx1QIOzESuekzZ0iGKjhGvRJJWruyCnjLxYDSOLK36kXJ40B83uXR8jhzEdafeMPpLZp1z8bNDBxi5sXzyRwalqFAC1Kyzct8eoNEfbalK70xRfJp9dQ0qvqBWUDXbJrqM2RjNwNRCS3kmM8k5PK7OOljcnonpKFAJkC-sb_q9-lPQtzxK&state=463b3841278b9bad69890d7f22ca246e#=

レスポンスボディ

param key value
code [Authorization Code]
state [CSRF攻撃対策用の値]

レスポンスサンプル

ユーザによるアクセス許可

{
    "code": "AQD6vr3EZ4NC169LwiPb7tydPdEyhCj6pJbFw_TwS3JH8Qnt9vvOhQGmKP5Ji2uzpUyeUjx9sbN5_rm5I8YQHyZPqsNdqpS0D4nYU-5qjgBcAc2Pj6I7rKknKiVPGT9hCGTOhu0noTIdgUYmyf21OrR7oGdJyBUHy4iOvwPx1QIOzESuekzZ0iGKjhGvRJJWruyCnjLxYDSOLK36kXJ40B83uXR8jhzEdafeMPpLZp1z8bNDBxi5sXzyRwalqFAC1Kyzct8eoNEfbalK70xRfJp9dQ0qvqBWUDXbJrqM2RjNwNRCS3kmM8k5PK7OOljcnonpKFAJkC-sb_q9-lPQtzxK",
    "state": "463b3841278b9bad69890d7f22ca246e"
}

ユーザによるアクセス拒否

{
    "error": "access_denied",
    "error_code": "200",
    "error_description": "Permissions error",
    "error_reason": "user_denied"
}

access_token

リクエストパラメータ

GET https://graph.facebook.com/oauth/access_token
param key value
client_id [クライアントID]
client_secret [クライアントシークレット]
redirect_uri [コールバックURL]
code [Authorization Code]

リクエストサンプル

curl \
--data-urlencode "client_id=2301467425495594" \
--data-urlencode "redirect_uri=https://hogehoge.com/oauth/facebook/callback.php" \
--data-urlencode "client_secret=ebb67f4t66f28dc3f9049161f70e3c37" \
--data-urlencode "code=AQAw1Ma4uzQTtw_L7L2xKOOk2bky2sI_vxE1j4wu1Vu0ldX7At7PLS7ga9Y2V3hVRdHWEYIbmxnHCktSf0E1F3Kx7FAYtxOnfKxXONY44QkkIFEk5dYypjeaqbEAmwr3jZOJGgaTc59gFC8ArjXibNmuep5eWZGmPwmANMzHeHLz_jkHYWkrf8pSTpThsHmPSCnY-RK0P3U0RtNi0qILTqxqRU173Iih2TSCtmATYmybOZmbZS0cMFUCIuDE1KtCYciO5y5sBRLWBbZ7JE53iho5nZMn7EQgEA7dFYBjQy-2Mm2opi9YF82zyCZ9DE0TA1TwQ44Ua4tSqSCvSjTqAhVc" \
https://graph.facebook.com/oauth/access_token


https://graph.facebook.com/oauth/access_token?client_id=2301467425495594&redirect_uri=https://hogehoge.com/oauth/facebook/callback.php&client_secret=ebb67f4366f58dc3f9049161f70e3c37&code=AQBdEGmgcolanpr31aLfvUvOKR8xggDLUZVSVpAN1BrVWpkLMc-KLmgCUfoPQaeRCuwHxL9So6emDtFu32drGt6EplaDPwgcqshoevHaTIVCh0aSDliUoYEniEWZsoERLm4KWzyEb1Dr1KdapAIr4Q4jnsfY1Xs_cXacpeu8e7PukkJoRdPuV-48vpUukhUx9fI4xlrmqJ0j5rD-b777BwY-oSM4mqZy95ReHp67pXNFKih-RdU4E4K6-QDvOEeFIsWFDNTw8evPauQOZC3uIZrnigxStF1qmGFf1BTmV90I8pzrC5YGUAJFdrHlJaQ2wS52tKCWqTAsTqoz69kI8zL9

レスポンスボディ

param key value
access_token [アクセストークン]
token_type Bearer
expires_in [有効期限（秒）]

レスポンスサンプル

{
    "access_token": "EAAgtLCTV7CoBANdX54CkTDrDn3m4ruvMCWhXDS9Pyt4q0765azeSZBwKcXmCDDdanBIVactyiZATUN6PlepXviYIFgiq90PPYof4E5S4GaBblRZBbLJt3UFHep5AEM02stWytWBo7vIMRQ1YCV4PuiEtoeifba7gxNF4HlH7QZDZD",
    "token_type": "bearer",
    "expires_in": 5180931
}

ユーザ情報取得

リクエストパラメータ

GET https://graph.facebook.com/me
param key value
access_token [アクセストークン]

リクエストサンプル

curl https://graph.facebook.com/me?access_token=EAAgtLCTV7CoBADVK2EjjLX9kFJeVe4o24Sa0XwFlBdXecClHUQWZCqwG8v747S08ZCTfLPy2IIIz4OVJEEbvZBmLM2nyNC1TorFZBxkWgZBRpF1HMCARm5YDfR78PxL1VZCkkprMoPYZCXl2vIrwigtSymuenZBjvAtexKzRnJ7SkwZDZD

レスポンスボディ

param key value
id ユーザID
name ユーザ名

レスポンスサンプル

{
    "id": "1208052052731056"
    "name": "田中 太郎",
}

Twitter OAuth認証について

OAuth Twitter Curl アクセストークン

Twitter OAuth認証について

参考資料

とっても簡単！TwitterのOauth認証

Twitter REST APIの使い方

Developer Twitter にてサイト情報などの設定

developer.twitter

  • 右上の「Create an app」よりアプリを作成
    • App name：アプリ名
    • Application description：アプリ詳細
    • Website URL：サイトURL
    • Callback URLs：コールバックURL
  • 「Keys and tokens」タブよりキー情報を取得
    • Consumer API keys
      • API key
      • secret key

request_token

POST https://api.twitter.com/oauth/request_token

リクエストパラメータ

header key value
oauth_callback [コールバックURL]
oauth_consumer_key [API key]
oauth_nonce [任意で用意したランダムな文字列]
oauth_timestamp [UNIX TIMESTAMPの値]
oauth_version 1.0
oauth_signature_method HMAC-SHA1
oauth_signature [作成した署名を指定]

リクエストサンプル

curl \
-X POST \
-H "Authorization: OAuth oauth_callback=https%3A%2F%2Fhogehoge.com%2Foauth%2Ftwitter%2Fcallback.php,oauth_consumer_key=drWFRzMWEau4nNYpyRe8XyMFZ,oauth_nonce=0.72398500%25201567388947,oauth_signature_method=HMAC-SHA1,oauth_timestamp=1567388947,oauth_version=1.0,oauth_signature=kSiZZ%2Fq0D4E0upmC1bjNjxXGNns%3D" \
https://api.twitter.com/oauth/request_token

レスポンスボディ

param key value
oauth_token [リクエストトークン]
oauth_token_secret [リクエストトークンシークレット]
oauth_callback_confirmed true

レスポンスサンプル

oauth_token=Z5rhnQAAAAAA_zSZAAABbO-mJ2I&oauth_token_secret=o1tTJyKl8vmI4SI98BMSGwCElyJnA3qH&oauth_callback_confirmed=true

OAuth認証

GET https://api.twitter.com/oauth/authorize

リクエストパラメータ

key value
oauth_token [リクエストトークン]

リクエストサンプル

# ブラウザで開く
https://api.twitter.com/oauth/authorize?oauth_token=uP0mkAAAAAAA_zSZAAABbO-qrDk

OAuth認証 callback

GET https://hogehoge.com/oauth/twitter/callback.php?oauth_token=1UZAWwAAAAAA_zSZAAABbOHBEh4&oauth_verifier=DLJ4s15BcVMvc3UMIGmXBE46asmfRs25

レスポンスボディ

param key value
state google_adwords
oauth_token [Authorization Code]
oauth_verifier [URLに付けているパラメータのoauth_verifierの値]

レスポンスサンプル

「連携アプリを認証」をクリックした場合

{
    "oauth_token": "Z5rhnQAAAAAA_zSZAAABbO-mJ2I",
    "oauth_verifier": "bEOGBRRpdnIsHRhhp4o70CbEsfvCFV5c"
}

「キャンセル」をクリックした場合

{
    "denied": "MG78eQAAAAAA_zSZAAABbOHJBPI"
}

access_token取得

POST https://api.twitter.com/oauth/access_token

リクエストパラメータ

header key value
oauth_token [Authorization Code]
oauth_consumer_key [API key]
oauth_verifier [URLに付けているパラメータのoauth_verifierの値]
oauth_nonce [任意で用意したランダムな文字列]
oauth_timestamp [UNIX TIMESTAMPの値]
oauth_version 1.0
oauth_signature_method HMAC-SHA1
oauth_signature [作成した署名を指定]

リクエストサンプル

curl \
-X POST \
-H "Authorization: OAuth oauth_consumer_key=drWFRzMWEau4nNYpyRe8XyMFZ,oauth_nonce=0.83296100%201567395036,oauth_signature_method=HMAC-SHA1,oauth_timestamp=1567395036,oauth_token=I4F8gQAAAAAA_zSZAAABbPAGF9E,oauth_verifier=zFlLLCY56m3OtIYpp8VvOGLMSET2w7xu,oauth_version=1.0,oauth_signature=z/gpaAhdsQjjBR0fugQ5n5+FC+4=" \
-k https://api.twitter.com/oauth/access_token

レスポンスボディ

param key value
oauth_token [アクセストークン]
oauth_token_secret [リフレッシュトークン]
user_id [ユーザID]
screen_name [ユーザ名]

レスポンスサンプル

oauth_token=6253282-eWudHldSbIaelX7swmsiHImEL4KinwaGloHANdrY&oauth_token_secret=2EEfA6BG3ly3sR3RjE0IBSnlQu4ZrUzPiYKmrkVU&user_id=6253282&screen_name=twitterapi

てっとり早く、サーバー上の大量のファイルから指定キーワードがあるファイルを取得するコマンド 

find ./ -type f -print | xargs grep 'キーワード';

 キーワードに検索したいワードを設定する

find ./ -type f -print | xargs grep 'test.php';
./tree:| | | | | |--config.apptest.php
./tree:| | | | | |--config.test.php
./tree:| | | | | |--database.test.php
./tree:| | | | | | |--test.php

 

 検索結果

Methods with the same name as their class will not be constructors in a future version of PHP エラー

php5.2からphp7に変更対応したときにでてきたエラー
http://php.net/manual/ja/migration70.deprecated.php

PHP 4 形式のコンストラクタ (クラス名と同じ名前のメソッドを定義するもの) が非推奨となりました。将来的に削除される見込みです。 PHP 7 では、クラス内でこの形式のコンストラクタしか定義されていない場合に E_DEPRECATED が発生します。 __construct() メソッドを実装していれば、この警告は発生しません。

参考コード

class SC_Initial_Ex extends SC_Initial {

// {{{ constructor

/**
* コンストラクタ
*/
function SC_Initial_Ex() {
parent::SC_Initial();
}
}

コンストラクタ (クラス名と同じ名前のメソッドを定義するもの)が使えなくなったので修正する必要がある

function SC_Initial_Ex() {
↓
function __construct() {

A non-numeric value encountered PHP エラー

 

php5.2からphp7に変更対応したときにでてきたエラー


https://secure.php.net/manual/ja/migration71.other-changes.php

数値形式ではない文字列を使って、数値を期待する演算 (+ - * / ** % << >> | & ^ や、これらを用いた代入演算) を行おうとしたときに、 E_WARNING あるいは E_NOTICE レベルのエラーが発生するようになりました。 E_NOTICE が発生するのは、文字列が数値で始まっていながら非数値で終わる場合で、 E_WARNING が発生するのは文字列中に数値が含まれない場合です。

参考コード

// カート内商品数の合計
function getTotalQuantity($shop_id) {
    $total = 0;
    $max = $this->getMax($shop_id);
    for($i = 0; $i <= $max; $i++) {
        $total+= $this->cartSession[$shop_id][$i]['quantity'];
    }
    return $total;
}

この場合、以下のように型が違うためWarningが出てしまう。

変数型
$total int
$this->cartSession[$shop_id][$i]['quantity'] string

以下の様にint型で揃えるとエラーがでない

$total+= $this->cartSession[$shop_id][$i]['quantity'];
↓
$total+= (int)$this->cartSession[$shop_id][$i]['quantity'];

CentOS7にffmpegをインストールメモ

参考サイト

CompilationGuide – FFmpeg

Get the Dependencies

↑ここからインストール手順開始

 

Yasm
libx264
libx265
libfdk_aac
libmp3lame
libopus
libogg
libvorbis
libvpx

上記、インストール後

FFmpeg をインストール